Image Rollovers - Description

  1. Add the following code to the document you want to use the script in:

    <script src="rollover.js"></script>

    If the image_preloader.js file is in a different directory than the html document, be sure to include the relative path to the Javascript file in the src attribute value.

  2. Your rollover images should have file names that end in "_on" and "_off" (for instance, "home_on.png" and "home_off.png"). The rest of the file name and the file name extension for each pair can be anything you like as long as they are the same. Rollover images can be placed in any directory as long as pairs are put in the same directory together. Code the page normally with "_off" images and the script will automatically turn all these "_off" images into rollovers so that, when a visitor moves their mouse over the image, it will be replaced by the "_on" version of the same image.

  3. For support in browsers like IE4 Windows, IE4+ Mac, Opera 3-6, add an onload event handler to the <body> tag that calls rolloverInit():

    <body onload="rolloverInit();">

    If your <body> tag already has an onload event handler, append rolloverInit(); to the current value (be sure to add a ; to the end of the current value if there isn't one already).

  4. Have a nice day.

More about this script

Related to this script


This script is released under a Creative Commons License.