|
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.
InMotion Web Hosting Customer Support
M-F 8am - 7pm PST
213-239-0050
More information can be found at the
InMotion Hosting Main Site |
|
|
