Home Resources Bio
JavaScript
Images: Rollover
There are any number of rollover scripts on the Internet that will cause images to "flip" or "change" when you roll over them with the cursor. Here is one sample.

Designing the on/off images can be the challenging part. Look at some of the images out on the web and try to create your own with an image editing software package. Or, buy some clip art or use the "free" samples on the web.

After you have the two (on and off) images in mind, put this script inside the <head> tag: (Note that each of the function statements below should be on one line.) This particular script requires that images are the same size.

    <script language="JavaScript">

    browserName = navigator.appName; // detect browser

    browserVer = parseInt(navigator.appVersion);

    function change1 (picture){if ((browserName == 'Netscape' && browserVer >= 3)||(navigator.appName.substring(0,9) == 'Microsoft' && browserVer >= 4)){document.bullettag1.src = picture}}

    function change2 (picture){if ((browserName == 'Netscape' && browserVer >= 3)||(navigator.appName.substring(0,9) == 'Microsoft' && browserVer >= 4)){document.bullettag2.src = picture}}

    function change3(picture){if ((browserName == 'Netscape' && browserVer >= 3)||(navigator.appName.substring(0,9) == 'Microsoft' && browserVer >= 4)){document.bullettag3.src = picture}}

    </script>
You determine how many different image pairs you want (the sample shows three). To add more, follow the style of the function call. Note the boldface areas where the function changes. The handy thing about this JavaScript is that it runs on Netscape (versions 3 and higher) and IE (versions 4 and higher) browsers.

In copy, use the following code for the image call-out:

    <a href="page.htm" onMouseOver="change1('/images/name_on.gif')" onMouseOut="change1('/images/name_off.gif')"> <img src="/images/name_off.gif" border="0" alt="Javascript" name="bullettag1" border="0" width="81" height="19"></a>

    <a href="next.htm" onMouseOver="change2('/images/another_on.gif')" onMouseOut="change2('/images/another_off.gif')"><img src="/images/another_off.gif" border="0" alt="Javascript" name="bullettag2" border="0" width="81" height="19"></a>

    <a href="again.htm" onMouseOver="change3('/images/another_on.gif')" onMouseOut="change3('/images/another_off.gif')"><img src="/images/another_off.gif" border="0" alt="Javascript" name="bullettag3" border="0" width="81" height="19"></a>

Choose any naming convention you want for the images, but be sure you know which is which. For our sample, we stored the images in the "images" directory and included the "on" or "off" as part of the image name. Correct the width and height values for your images too.
© 2023 Sampson4.com   ||   E-mail: offices@sampson4.com