Next

Working with Images

One of the greatest desires in web development today is having rollover or hover buttons.  Many sites use Java Applets for this, but if someone comes to the site with a browser that does not support Java or that version of Java, there is no navigation.  This example solves this problem because the navigation is handled using a standard hyperlink.  The rollover effect is added using JavaScript.  The result is a page that loads faster and allows navigation in all browsers.

The onmouseover and onmouseout events call their respective functions to swap the "src" and "lowsrc" images in the image tag.

<a href="Htmlpage.htm"
    onmouseout="replaceImage('Home')"
    onmouseover="swapImage('Home')">
    <img border="0" height="29" name="Home"
      lowsrc="Buttons/Home_over.gif"
      src="Buttons/Home.gif" width="96"
      alt="Next Page"></a>

function swapImage(strImageName) {
     document.images[strImageName].saveSrc=
        document.images[strImageName].src;
     document.images[strImageName].src=
        document.images[strImageName].lowsrc;
}

function replaceImage(strImageName) {
    document.images[strImageName].src=
        document.images[strImageName].saveSrc;
}