OnMouseOver Event Handler: Image Rollover
JavaScript FAQ |
Images FAQ |
Keyboard & Mouse Events FAQ
|
Question: Can I use JavaScript to 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 this image rollover effect,
the <IMG> tag is embedded in a hyperlink that has JavaScript
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.)