Changing the image "on mouseover".

[mayordc]

Can anybody show me a code to automatically change the image to another image once the mouse pointer gets over it.

Thank you.

[Gollum]

how 'bout...

<img src="oneimage.gif" onmouseover="this.src='otherimage.gif';" onmouseout="this.src='oneimage.gif';" >

[lillu]

Here's two ways...

If the images are not preloaded, every time you move your mouse over the image, the
image has to get downloaded over the network:

<img src="phone2.jpg" NAME="phone" onMouseOver="phone.src=phone1.jpg'"
onMouseOut="phone.src=phone2.jpg'" />

Use javascript functions to preload the images first so that they will be ready to display when you move over them.

<SCRIPT LANGUAGE="JavaScript">

if (document.images) {
img1 = new Image();
img1.src = "img1.jpg";
img2 = new Image();
img2.src = "img2.jpg";
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + ".src");
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + ".src");
}
}
</SCRIPT>




<A HREF="" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img2')"><IMG NAME="img2" SRC="img1.jpg"></A>

[Sul]

Why are you using if statements?

[lillu]

In case older browser don't have the Images collection.