I can give you sample code if that's any help. It'll probably still look like chinese if you don't understand the code but I'll explain briefly what's going on.Firstly, you need to pre-load the images. This makes sure that the images are not reloaded every time a user hovers over the links. You could use something like this (put it between the head tags on your page):
[code]
<script language="JavaScript">
var imgover = new Array;
var imgout = new Array;
for(var x=1; x<5; x++)
{
imgover[x] = new Image(140, 40);
imgout[x] = new Image(140, 40);
imgover[x].src = "/images/imgover" + x + ".gif";
imgout[x].src = "/images/imgout" + x + ".gif";
}
function swapit(lnk,srce){
if(document.images) {
document[lnk].src= eval(srce + ".src"
}
}
</script>
[/code]
That code will preload eight images of dimensions 140 by 40 pixels:
imgover1.gif
imgover2.gif
imgover3.gif
imgover4.gif
and
imgout1.gif
imgout2.gif
imgout3.gif
imgout4.gif
It presumes these are stored in a folder on your server named 'images' but you can remove the '/images/' part if they are stored in the same location as your page.
These images are now stored in the arrays named 'imgover' and 'imgout', ready for use. To use them, links could be something like these:
[code]
<table align="center" border="0" cellpadding="0" cellspacing="0" height="79">
<tr>
<td width="60">
<a href="page1.htm" target="_top"
onMouseOver="swapit('lnk1','imgover[1]'),window.status='Page 1'; return true"
onMouseOut="swapit('lnk1','imgout[1]'),window.status=' '; return true">
<img src="/images/imgout1.gif"
alt="Page 1" border="0" name="lnk1" width="140" height="40"></a>
<br />
<a href="page2.htm" target="_top"
onMouseOver="swapit('lnk2','imgover[2]'),window.status='Page 2'; return true"
onMouseOut="swapit('lnk2','imgout[2]'),window.status=' '; return true">
<img src="/images/imgout2.gif"
alt="Page 2" border="0" name="lnk2" width="140" height="40"></a>
<br />
<a href="page3.htm" target="_top"
onMouseOver="swapit('lnk3','imgover[3]'),window.status='Page 3'; return true"
onMouseOut="swapit('lnk3','imgout[3]'),window.status=' '; return true">
<img src="/images/imgout3.gif"
alt="Page 3" border="0" name="lnk3" width="140" height="40"></a>
<br />
<a href="page4.htm" target="_top"
onMouseOver="swapit('lnk4','imgover[4]'),window.status='Page 4'; return true"
onMouseOut="swapit('lnk4','imgout[4]'),window.status=' '; return true">
<img src="/images/imgout4.gif"
alt="Page 4" border="0" name="lnk4" width="140" height="40"></a>
</td>
</tr>
</table>
[/code]
When a user hovers over the images the function (swapit) is called and the img src for that image ( see name="lnk1", name="lnk2", name="lnk3" and name="lnk4" ) is changed to imgover[whatever]. OnMouseOut the function is called again and imgout[whatever] is displayed.
There are plenty of other ways to do this but the above is quite straightforward. I know it's not a 'tutorial' as such but it should help get you started. Here's the code for a complete test page if you want to play around with it:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image Rollovers</title>
<script language="JavaScript">
var imgover = new Array;
var imgout = new Array;
for(var x=1; x<5; x++)
{
imgover[x] = new Image(140, 40);
imgout[x] = new Image(140, 40);
imgover[x].src = "/images/imgover" + x + ".gif";
imgout[x].src = "/images/imgout" + x + ".gif";
}
function swapit(lnk,srce){
if(document.images) {
document[lnk].src= eval(srce + ".src"
}
}
</script>
</head>
<body>
<table width="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="140">
<a href="page1.htm" target="_top"
onMouseOver="swapit('lnk1','imgover[1]'),window.status='Page 1'; return true"
onMouseOut="swapit('lnk1','imgout[1]'),window.status=' '; return true">
<img src="/images/imgout1.gif"
alt="Page 1" border="0" name="lnk1" width="140" height="40"></a>
<br />
<a href="page2.htm" target="_top"
onMouseOver="swapit('lnk2','imgover[2]'),window.status='Page 2'; return true"
onMouseOut="swapit('lnk2','imgout[2]'),window.status=' '; return true">
<img src="/images/imgout2.gif"
alt="Page 2" border="0" name="lnk2" width="140" height="40"></a>
<br />
<a href="page3.htm" target="_top"
onMouseOver="swapit('lnk3','imgover[3]'),window.status='Page 3'; return true"
onMouseOut="swapit('lnk3','imgout[3]'),window.status=' '; return true">
<img src="/images/imgout3.gif"
alt="Page 3" border="0" name="lnk3" width="140" height="40"></a>
<br />
<a href="page4.htm" target="_top"
onMouseOver="swapit('lnk4','imgover[4]'),window.status='Page 4'; return true"
onMouseOut="swapit('lnk4','imgout[4]'),window.status=' '; return true">
<img src="/images/imgout4.gif"
alt="Page 4" border="0" name="lnk4" width="140" height="40"></a>
</td>
</tr>
</table>
</body>
</html>
[/code]
(Edited by KC at 8:48 pm on April 29, 2003)
