Mouseover Navigation Tutorial

Tutorial

  1. Create one image for the regular navigation. This will be called homeOn.
    homeOn
  2. Create one image for when you mouseover the first image. This will be called homeOff.
    homeOff
  3. Use this code in the body where you put the navigation.
    <a href="LINKURLHERE" onMouseOver="changePic('home', 'homeOn')" onMouseOut="changePic('home', 'homeOff')"><img alt="Home" src="HOMEONURLHERE" name="home" border="0"></a>
  4. Replace LINKURLHERE with the page you want the button to lead to.
  5. Replace HOMEONURLHERE with the link to the image from step 1.
  6. Use this code in the head.
    <script type="text/javascript">
    homeOff = new Image;
    homeOff.src = "HOMEONURLHERE";
    homeOn = new Image;
    homeOn.src = "HOMEOFFURLHERE";

    function changePic(name, address) {
        document[name].src = eval(address + ".src");
    }
    </script>
  7. Replace HOMEONURLHERE with the link to the image from step 1.
  8. Replace HOMEOFFURLHERE with the link to the image from step 2.

Adding Another Button

Use the same code for each button, but make these changes each time:

Step 3 Code

  1. Change the three "home"s to the name of the second button.
  2. Change the one "homeOn" to the name of the second button with "On" at the end.
  3. Change the one "homeOff" to the name of the second button with "Off" at the end.
  4. Change LINKURLHERE and HOMEONURLHERE to your new URLs.

Step 6 Code

  1. Change the two "homeOn"s to the name of the second button with "On" at the end.
  2. Change the two "homeOff"s to the name of the second button with "Off" at the end.
  3. Change HOMEONURLHERE and HOMEOFFURLHERE to your new URLs.
  4. Remove the line that starts with "function".

Mouseover Navigation Example

HomeAboutLinks