OnMouseDown Effects
Question: How do I change an image when the user clicks on it?
Answer:
This is very similar to onMouseOver
effects. However, the techniques described on this page will
work only in Netscape 4.x or Internet Explorer 4.x (or newer browsers)
because versions 3.x of both browsers do not support the
onMouseDown and
onMouseUp event handlers.
Here is a simple example:
Press the mouse button while pointing at this folder, and it will open.
Release the mouse button, and the folder will close.
The <IMG> tag in this example is embedded in a hyperlink that has
onMouseDown,
onMouseUp and
onMouseOut event handlers:
<a href="#any_URL"
onMouseDown="handlePress();return true;"
onMouseUp="handleRelease();return true;"
onMouseOut="handleRelease();return true;"
onClick="return false;"
><img name=imgName width=17 height=15 border=0
alt="This image changes when you press the mouse button!"
src="../hi-icons/2.gif"
></a>
In the
<HEAD> section of the page,
we have JavaScript code that preloads the image files
and defines the event handler functions:
<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
img_on =new Image(); img_on.src ="../hi-icons/1.gif";
img_off=new Image(); img_off.src="../hi-icons/2.gif";
}
function handlePress() {
if (document.images) document.imgName.src=img_on.src;
}
function handleRelease() {
if (document.images) document.imgName.src=img_off.src;
}
//-->
</script>
Here is a more complex example with several images:
The code is very similar to the above,
except that now the event handler functions
take the image's number as a parameter.
(To see the actual code, view the source of this page.)
JavaScripter.net.
Copyright
© 1999-2006, Alexei Kourbatov
