Looking For help With "onmouseover" Event

Factual Questions
1

I am helping a friend put together a home page. He wants to be able to mouse over and image and have it change to another image. Basically it will be a before and after shot of some remodeling work he is doing. I have looked around the net a bit and find several examples of “onmouseover” scripts. But none I have found are dedicated to what we would like to do.

To make things even more difficult we want to put the images in a table 2X2 and mouse over each image and have it change. I know there must be some way to do it in java but I just don’t have the smarts. :confused:

Any Help Would Be Much Appreciated.
TIA
Jim

2

The simplest HTML/JavaScript code to do this would look like this:



<a href="#" onMouseover="document.pic1.src='/pics/nathan/nathanwithsara.jpg'" onMouseOut="document.pic1.src='/pics/nathan/nathannasa.jpg'">
<IMG name="pic1" SRC="/pics/nathan/nathannasa.jpg">
</a>

To see it in action and the full coding hit up: http://larsen.is-a-geek.com/test.html

Someone will probably be along shortly to tell you not to use JavaScript.

3

You can do it in JavaScript. Java has nothing to do with it. Try something like this:



<img src="before.jpg" onmouseover="this.src='after.jpg';" onmouseout="this.src='before.jpg';">
4

Oh to add the 2x2 table just cut and paste the code below and wrap your <td></td> tags. You’ll have to then change the name in each IMG and anchor tag.

I tested this in IE6+ and FireFox 1+.

5

Thanks, I used Friedos sample. It does just what I want! :slight_smile:

6

OK, posted some pages and it works pretty well. However I am noticing some lag on the onmouseoverr image displaying. I’m assuming it is because the image is being loaded at the time of the onmouseover event? Is there a way to have the images loaded ahead of time? Am I asking to much?

7

Not at all. Pre-loading images is pretty easy. Put something like this in the <head> section of your HTML:



<script language="javascript">
img1 = new Image();
img1.src = "img1.gif";

img2 = new Image();
img2.src = "img2.gif";

...etc
</script>

Of course the more images you pre-load in this manner, the slower your page-load time will be. So don’t over-do it.