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: This image changes when you point at it!
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: This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it!
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.)

Copyright © 1999-2011, JavaScripter.net.