Mouseover Event II

JavaScript Mouseover Event Image Changer, Version 2

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.

This version doesn't generate an error in Internet Explore 3.0 and earlier. 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 image.

Now you add the <A> tag:

<A
   HREF="mouseover2.asp" 
   onMouseover="turnOn()" 
   onMouseout="turnOff()">
<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 image. It does this by calling a JavaScript function named turnOn(), which I'll describe in a second. Similarly, the onMouseout statement calls the turnOff() function, which tells the browser to display the regular image once the mouse goes out of the image.

Now let's check out those JavaScript functions:

<SCRIPT LANGUAGE = "JavaScript">
<!--
    function turnOn() {
        browserName = navigator.appName;
        browserVer = parseInt(navigator.appVersion);
        if ((browserName == "Netscape" && browserVer >= 3) || (browserName == "Microsoft Internet Explorer" && browserVer >=4)) 
            document.mypicture.src = "books-on.gif";
        }
    function turnOff() {
        browserName = navigator.appName;
        browserVer = parseInt(navigator.appVersion);
        if ((browserName == "Netscape" && browserVer >= 3) || (browserName == "Microsoft Internet Explorer" && browserVer >=4)) 
            document.mypicture.src = "books.gif";
        }
//-->
</SCRIPT>

Place everything between and including the <SCRIPT> and </SCRIPT> tags inside your page, between the </HEAD> and <BODY> tags. Luckily, you can ignore most of what's happening here. (If you're curious, the first three lines in each function check the user's browser and browser version.) They key is the last statement in each function. For example, here's the last statement in the turnOn() function:

document.mypicture.src = "books-on.gif";

This statement tells the browser to change the mypicture image to "books-on.gif". When using this script on your own page, change the image filenames accordingly.