Many Images with Rollovers

[Total: 0    Average: 0/5]

This shows how to set up a page with multiple mouseovers.

Head Code:

<SCRIPT type="text/javascript">
var imgNames = new Array();
var imgArray = new Array();
function setToLoadImg(imgName){var _ret=-1;imgNames[_ret=(imgNames.length?imgNames.length:0)] = imgName;return (_ret);}
function loadImgs() {for(var i=0;i<imgNames.length;i++){imgArray[i]=new Image();imgArray[i].src = imgNames[i];}}
function si(imgName,imgNum){imgName.src=imgNames[imgNum];}
var img1  = setToLoadImg("http://www.js-examples.com/js/pic2.gif");
var img2  = setToLoadImg("http://www.js-examples.com/js/pic1.gif");

var img3  = setToLoadImg("http://www.js-examples.com/js/pic2.gif");
var img4  = setToLoadImg("http://www.js-examples.com/js/pic1.gif");

var img5  = setToLoadImg("http://www.js-examples.com/js/pic2.gif");
var img6  = setToLoadImg("http://www.js-examples.com/js/pic1.gif");

var img7  = setToLoadImg("http://www.js-examples.com/js/pic2.gif");
var img8  = setToLoadImg("http://www.js-examples.com/js/pic1.gif");

var img9  = setToLoadImg("http://www.js-examples.com/js/pic2.gif");
var img10 = setToLoadImg("http://www.js-examples.com/js/pic1.gif");

</SCRIPT>

Body Code:

<TABLE BORDER="1" WIDTH="100%" HEIGHT="100%">
<TR>
<TD WIDTH="100%">
<IMG SRC="http://www.js-examples.com/js/pic1.gif" ALIGN="BOTTOM" BORDER="0" name="aam">
<A HREF="/"
   onmouseout="si(document.aam,img2)"
   onmouseover="si(document.aam,img1)">Link</A></TD>
</TR>
<TR>
<TD WIDTH="100%">
<IMG SRC="http://www.js-examples.com/js/pic1.gif" ALIGN="BOTTOM" BORDER="0" name="c2">
<A HREF="/"
   onmouseout="si(document.c2,img4)"
   onmouseover="si(document.c2,img3)">Link</A></TD>
</TR>
<TR>
<TD WIDTH="100%">
<IMG SRC="http://www.js-examples.com/js/pic1.gif" ALIGN="BOTTOM" BORDER="0" name="c3">
<A HREF="/"
   onmouseout="si(document.c3,img6)"
   onmouseover="si(document.c3,img5)">Link</A></TD>
</TR>
<TR>
<TD WIDTH="100%">
<IMG SRC="http://www.js-examples.com/js/pic1.gif" ALIGN="BOTTOM" BORDER="0" name="links">
<A HREF="/"
   onmouseout="si(document.links,img8)"
   onmouseover="si(document.links,img7)">Link</A></TD>
</TR>
<TR>
<TD WIDTH="100%">
<IMG SRC="http://www.js-examples.com/js/pic1.gif" ALIGN="BOTTOM" BORDER="0" name="java">
<A HREF="/"
   onmouseout="si(document.java,img10)"
   onmouseover="si(document.java,img9)">Link</A>
</TD>
</TR>
</TABLE>
<hr>
normally you would have this in the BODY tag:
onload="loadImgs()"
<script>
document.onload=loadImgs;
</script>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *