Idocs Guide to HTML
Many Links, One Rollover 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. 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.

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.