JavaScript FAQ - JavaScript OnMouseOver

On-line Guides

How To Guides

Virtualization

General System Admin

Linux Security

Linux Filesystems

Web Servers

Graphics & Desktop

PC Hardware

Windows

Problem Solutions

Privacy Policy

The JavaScript FAQ
Prev	Home	Next

OnMouseOver Effects

JavaScript Essentials
eBook

8ドル.99

eBookFrenzy.com

Question: How do I 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 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: 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.)

Mirrored with kind permission of Alexei Kourbatov Design by Interspire