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

This is the script for doing many-links-one-image rollovers. Copy and paste this script as-is without making any changes.

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1998 Idocs, Inc. https://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.