• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

12. Visual Effects for Stationary Content > 12.2. Swapping Images (Rollovers)

Swapping Images (Rollovers)

NN 4, IE 4

Problem

You want the picture displayed by an img or image-type input element to change when the user rolls the mouse over the element.

Solution

There are two parts to the solution. The first part is a generic and backward-compatible image swapping function, called setImage( ) , that can be used by any number of images on the page. The following function assumes the existence of a custom object referencing precached images, as shown in Recipe 12.1:

function setImage(imgName, type) {
    if (document.images) {
        if (type =  = "hilite") {
            document.images[imgName].src = imagesHilite[imgName].src;
            return true;
        } else if (type =  = "normal") {
            document.images[imgName].src = imagesNormal[imgName].src;
            return true;
        }
    }
    return false;
}

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint