Change image when mouse hovers over href (image is smaller than href area)

[James Dorsen]

I have the text "site" and right of it "img_1.gif".
I currently have it setup (through CSS) so that once the mouse hovers "site" it changes color. However to change the "img_1.gif" to "img_2.gif" you must hover the mouse over the .gif.

I would like it setup so that hovering over "site" will also change the image from "img_1.gif" to "img_2.gif" without having to use CSS.

Any help would be greatly appreciated.

<a href="site.html">
 site
<img src="img_1.gif"
onmouseover="this.src='img_2.gif'"
onmouseout="this.src='img_1.gif'" />
</a>
 

[drhowarddrfine]

You should ask javascript questions on the javascript board but why don't you want to use CSS to do this?

[James Dorsen]

I will probably end up using CSS. I thought there may be an easy solution I was unaware of. The reason I didn't want to use CSS was because in HTML the image sits in the correct place every time. If I was to put it in CSS (to my knowledge) I would have to do a custom "id" for every image.

In the process of writing this message I remembered that I can do a "float: right;" in CSS. This would allow the image to sit in the correct place of every title.

Thanks anyways.

[Death Slaught]

CSS is the easy solution. You wouldn't need a different id for every image. You can use the class attribute for each one and achieve the same affect. Unless you are doing this with several sets of images?

As for the JavaScript,

You could just give the image an id and use document.getElementById('') to change the source. Just be conscious of the single quotes.

<a href="site.html" onmouseover="document.getElementById('siteImage').src='img_2.gif'" 
onmouseout="document.getElementById('siteImage').src='img_1.gif'">
 site
<img id="siteImage" src="img_1.gif"
onmouseover="this.src='img_2.gif'"
onmouseout="this.src='img_1.gif'" />
</a>

Regards, Death