JavaScript Mouse Over Change Image

JavaScript code when the mouse over the image, it will become a second pre-set image. When the mouse leaves, it will return to normal image. Very practical and many are used in most of the website.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="JavaScript">
<!-- Hide from old browsers

var NN3 = false;
image1= new Image();
image1.src = "IMAGE FILE OFF";
image1on = new Image();
image1on.src = "IMAGE FILE ON";
image2= new Image();
image2.src = "IMAGE FILE OFF";
image2on = new Image();
image2on.src = "IMAGE FILE ON";

function on3(name)   {
        document[name].src = eval(name + "on.src");
}
function off3(name)  {
        document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}
// -->
</script>

Insert this code into <body> tags

<a href="YOUR LINK" onmouseover="on('image1');" onmouseout="off('image1')"><img src="IMAGE FILE OFF"  border="0" name="image1"></a><br>
<a href="YOUR LINK" onmouseover="on('image2');" onmouseout="off('image2')"><img src="IMAGE FILE OFF"  border="0" name="image2"></a>

Instruction:

Change the following text:

IMAGE FILE OFF - Normal image file URL.
IMAGE FILE ON - Mouse over image file URL.
YOUR LINK - Website URL where you want to link to when click on image.

Webmaster » Web Programming » JavaScript » Mouse Over Script » Change Image

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links