# Looking For help With "onmouseover" Event

**URL:** https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293
**Category:** Factual Questions
**Created:** [September 6, 2005, 3:49am UTC](https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293 "2005-09-06T03:49:15Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![JimMacMillan](https://avatars.discourse-cdn.com/v4/letter/j/7bcc69/32.png) [@JimMacMillan](https://boards.straightdope.com/u/JimMacMillan)
#### Post date: [September 6, 2005, 3:49am UTC](https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293/1 "2005-09-06T03:49:15Z")

</div>

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. 😕

Any Help Would Be Much Appreciated.  
TIA  
Jim

---

<div class="post-metadata">

### Author: ![larsenmtl](https://avatars.discourse-cdn.com/v4/letter/l/d78d45/32.png) [@larsenmtl](https://boards.straightdope.com/u/larsenmtl)
#### Post date: [September 6, 2005, 4:12am UTC](https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293/2 "2005-09-06T04:12:31Z")

</div>

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

```auto

<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](http://larsen.is-a-geek.com/test.html)

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

---

<div class="post-metadata">

### Author: ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)
#### Post date: [September 6, 2005, 4:14am UTC](https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293/3 "2005-09-06T04:14:51Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

### Author: ![larsenmtl](https://avatars.discourse-cdn.com/v4/letter/l/d78d45/32.png) [@larsenmtl](https://boards.straightdope.com/u/larsenmtl)
#### Post date: [September 6, 2005, 4:19am UTC](https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293/4 "2005-09-06T04:19:19Z")

</div>

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+.

---

<div class="post-metadata">

### Author: ![JimMacMillan](https://avatars.discourse-cdn.com/v4/letter/j/7bcc69/32.png) [@JimMacMillan](https://boards.straightdope.com/u/JimMacMillan)
#### Post date: [September 6, 2005, 4:39am UTC](https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293/5 "2005-09-06T04:39:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![JimMacMillan](https://avatars.discourse-cdn.com/v4/letter/j/7bcc69/32.png) [@JimMacMillan](https://boards.straightdope.com/u/JimMacMillan)
#### Post date: [September 6, 2005, 5:05am UTC](https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293/6 "2005-09-06T05:05:24Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)
#### Post date: [September 6, 2005, 5:28am UTC](https://boards.straightdope.com/t/looking-for-help-with-onmouseover-event/320293/7 "2005-09-06T05:28:17Z")

</div>

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

```auto

<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.