Mouseover Event

JavaScript Mouseover Event Image Changer

Position your mouse pointer over the image below to see a different image, and then move the pointer off the image to restore it. Note that you must have Netscape 3.0 or higher or Internet Explorer 4.0 for this to work.

Let's examine the HTML and JavaScript that I used for this example. First, here's the <IMG> tag:

<IMG 
   SRC="books.gif" 
   WIDTH=97 
   HEIGHT=43 
   BORDER=0
   NAME="mypicture">

Everything is more or less normal, except that I assigned the name "mypicture" to the picture.

Now you add the <A> tag:

<A
   HREF="mouseover.asp" 
   onMouseover="mypicture.src='books-on.gif'" 
   onMouseout="mypicture.src='books.gif'">
<IMG 
   SRC="books.gif" 
   WIDTH=97 
   HEIGHT=43 
   BORDER=0
   NAME="mypicture">
</A>

Notice how I added the onMouseover and onMouseout bits. The onMouseover tells the browser which image to display when the user puts the mouse over the link. It does this by setting mypicture.src equal to the name of the "on" image (books-on.gif). Similarly, the onMouseout statement tells the browser to display the regular image (books.gif) once the mouse goes out of the image.

To use this on your own page, copy the <A> and <IMG> tags, and adjust the image file names accordingly. Note, too, that this method causes an error in Internet Explorer version 3. See Mouseover II for a revised method that prevents this error from occuring.