<< .. Extra Credit Exercise : Demo A : Rollovers : PopUp Window : DropDown Menu : Slideshow1 : Slideshow2 : All Class Demos .. >>

Extra Credit Demo: Rollover Buttons


This button links
to the code for
the HEAD tag.

This button links
to the code for
the BODY tag.

This button links
back to the
rollover page.

Javascript Head Code for Rollovers

Change the (size) and the name of the graphics to your button graphics by changing the code in red. To install this script:

Cut and paste this script into the HEAD of your document:


<script type="text/JavaScript">

if (document.images) {
Button1 = new Image(108,135); Button1.src = "images/one_link.jpg";
Button1 = new Image(108,135); Button1.src = "images/one_hover.jpg";
Button2 = new Image(108,135); Button2.src = "images/two_link.jpg";
Button2 = new Image(108,135); Button2.src = "images/two_hover.jpg";
Button3 = new Image(108,135); Button3.src = "images/three_link.jpg";
Button3 = new Image(108,135); Button3.src = "images/three_hover.jpg";
}

/* Function that swaps images. */

function rollo(id, newSrc) {
    var theImage = FindImage(document, id, 0);
    if (theImage) {
        theImage.src = newSrc;
    }
}

/* Functions that track and set toggle group button states. */

function FindImage(doc, name, j) {
    var theImage = false;
    if (doc.images) {
        theImage = doc.images[name];
    }
    if (theImage) {
        return theImage;
    }
    if (doc.layers) {
        for (j = 0; j < doc.layers.length; j++) {
            theImage = FindImage(doc.layers[j].document, name, 0);
            if (theImage) {
                return (theImage);
            }
        }
    }
    return (false);

}

</script>