Multiple mouseovers

Technorealm. The UK web site design company

Free javascript

[One of a collection of free javascripts from www.technorealm.co.uk]


OnMouseover example OnMouseover example OnMouseover example OnMouseover example OnMouseover example

Compare it with the single mouseover script to see the differences.
Place inside the <head> tags as usual.



<SCRIPT LANGUAGE = "JavaScript">
<!--

if (document.images) {
	
	img1on = new Image();           // The onmouseover image
	img1on.src = "hairbut1.gif";  
	img2on = new Image();
	img2on.src = "eyesbut1.gif";  
	img3on = new Image();
	img3on.src = "earsbut1.gif";
	img4on = new Image();
	img4on.src = "nosebut1.gif";
	img5on = new Image();
	img5on.src = "mouthbut1.gif";
	img1off = new Image();          // The normally seen image
	img1off.src = "hairbut.gif"; 
	img2off = new Image();
	img2off.src = "eyesbut.gif"; 
	img3off = new Image();
	img3off.src = "earsbut.gif";
	img4off = new Image();
	img4off.src = "nosebut.gif";
	img5off = new Image();
	img5off.src = "mouthbut.gif";
	
  }				  //This function changes the image when over.
    function imgOn(imgName) {
            if (document.images) {
            document[imgName].src = eval(imgName + "on.src");
            }
    }				   //This function changes the image back when off.
    function imgOff(imgName) {
            if (document.images) {
            document[imgName].src = eval(imgName + "off.src");        
            }
    }
// -->
</SCRIPT>

Here's the part you need to add to your page in order to see it. Shown in table format, though you can use it any way you like. Don't forget to change the #null references to your link URL's. 

<TABLE BORDER=0 cellpadding=0 cellspacing=0>
<TR><TD><A HREF="#null" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">
<IMG name="img1" BORDER=0 HEIGHT=30 WIDTH=100 SRC="hairbut.gif" ></A></TD>
</TR><TR>
<TD><A HREF="#null" onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')">
<IMG name="img2" BORDER=0 HEIGHT=30 WIDTH=100 SRC="eyesbut.gif" ></A></TD>
</TR><TR>
<TD><A HREF="#null" onMouseOver="imgOn('img3')" onMouseOut="imgOff('img3')">
<IMG name="img3" BORDER=0 HEIGHT=30 WIDTH=100 SRC="earsbut.gif" ></A></TD>
</TR><TR>
<TD><A HREF="#null" onMouseOver="imgOn('img4')" onMouseOut="imgOff('img4')">
<IMG name="img4" BORDER=0 HEIGHT=30 WIDTH=100 SRC="nosebut.gif" ></A></TD>
</TR><TR>
<TD><A HREF="#null" onMouseOver="imgOn('img5')" onMouseOut="imgOff('img5')">
<IMG name="img5" BORDER=0 HEIGHT=30 WIDTH=100 SRC="mouthbut.gif" ></A></TD>
</TR></TABLE>

www.technorealm.co.uk UK Web site design and graphics. A free resources site!