|
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">
<!--
// 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 ...>
Many Links, One Rollover: The IMG Tag >>>