OnMouseOver Button Change

Technorealm. The UK web site design company

Free javascript

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


OnMouseover example

Here's a script for the popular mouseover buttons. Move your mouse over the button and it changes.The 'normally' seen button is called eyesbut.gif and the 'onmouseover' button is called eyesbut1.gif. For simplicity, the buttons are placed in the same directory as the pages HTML file though you can add your path to suit.

This script needs to go inside the <HEAD> tags. 

<SCRIPT LANGUAGE = "JavaScript">
<!--
if (document.images) {
	img1on = new Image();           // The onmouseover image
	img1on.src = "eyesbut1.gif";  
	
	img1off = new Image();          // The normally seen image
	img1off.src = "eyesbut.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. Don't forget to change the #null reference to your link URL (ie http://www.wherever.com). 

<A HREF="#null" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">
<IMG name="img1" BORDER=0 HEIGHT=30 WIDTH=100 SRC="eyesbut.gif" ></A>

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