HTML >> Images >> Many Links, One Rollover

Many Links, One Rollover

Many Links, One Rollover: The IMG Tag

Starflower Allen Jimmy Paul Miko Each of these links changes the image when the mouse is over the link

Many Links, One Rollover: The Script

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this 
// notice with the code.

// var image information object
var mloi=new Object();

// set the image for swapping
function setswap()
{
if (! document.images)return;
var imgInfo=new Object();
imgInfo.defaultImg = new Image();
imgInfo.defaultImg.src = document.images[arguments[0]].src;
imgInfo.opts = new Object();
for (var i=1; i < arguments.length; i=i+2)
   {
   imgInfo.opts[arguments[i]]=new Image();
   imgInfo.opts[arguments[i]].src = arguments[i+1];
   }
mloi[arguments[0]] = imgInfo;
}

// set up the link for swapping
function swap(link,imgName,optName)
{
if (! document.images)return;
if (! link.swapReady)
   {   
   link.imgName    = imgName;
   link.onmouseout = swapBack;
   link.swapReady  = true;
   }
document.images[imgName].src=mloi[imgName].opts[optName].src;
}

function swapBack()
   {document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}

//-->
</SCRIPT>

The script does most of the work in creating the rollover. The image and the links call functions in the script, the functions then set the properties and methods for the image and links. To create the rollover, we add a few attributes to the image and link tags. We'll start with the <IMG ...> tag.

Many Links, One Rollover

Many Links, One Rollover: The IMG Tag

Copyright 1997-2002 Idocs, Inc. Written by Miko Sullivan.