OnMouseOver Effects
Question: How do I change an image when the user's mouse points at it?
Answer:
Here is a simple example:
Point at this folder, and it will open.
Move the mouse away, and the folder will close.
In this example, the image
is 2.gif;
the 
image is 1.gif.
Both files are stored in the ../hi-icons directory.
In order to create the "mouseover" effect,
the <IMG> tag is embedded in a hyperlink that has
onMouseOver and
onMouseOut event handlers:
<a href="#any_URL"
onMouseOver="handleOver();return true;"
onMouseOut="handleOut();return true;"
><img name=imgName width=17 height=15 border=0
alt="This image changes when you point at it!"
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 handleOver() {
if (document.images) document.imgName.src=img_on.src;
}
function handleOut() {
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
