Hi! I am wondering how to get 2 images instead of 1 on one hover button.

Example:
_______
|button | <I HOVER OVER THIS THE BUTTON CHANGES TO A DIFFERENT IMAGE
| 1 | BUT IT ALSO CHANGES THE IMAGE SOMEWHERE ELSE
----------

i put another blank transp. gif on another spot on
the page and when i hover over button 1 theirs a
different image when i hover over this.

so what im trying to say is how do i get a button to hover normally, but have another image change somewhere else at the same time.

Javascript can do the trick, by changing the source of the images, like so..

<script type="text/javascript">
function change() {
document.getElementById('button').src = "whatever.gif";
document.getElementById('otherone').src = "whatever.gif";
}
</script>

<img src="button.gif" alt="" id="button" onmouseover="change();" />
<img src="whatever.gif" alt="" id="otherone" />

Originally Posted by Dark-Skys99

Javascript can do the trick, by changing the source of the images, like so..

<script type="text/javascript">
function change() {
document.getElementById('button').src = "whatever.gif";
document.getElementById('otherone').src = "whatever.gif";
}
</script>
 
<img src="button.gif" alt="" id="button" onmouseover="change();" />
<img src="whatever.gif" alt="" id="otherone" />

cool, but I would say to use the 'images' collection. that's what it is there for. kill the 'id' or keep it, but give the images a 'name' attribute as is standard.

refer to like so, document.images.imageName.src / document.images["image_name"].src

and it's always best to pre-load the images before hand, otherwise, there is a download time upon rollover, before the images are displayed.

var pre_loaded_image = new Image();
pre_loaded_image.src = "images/my_image.jpg";

document.images.myImage.src = pre_loaded_image.src;

walla.

or you can just use CSS Rollovers

Chrishirst has the right idea but I've found that using images in the background of some CSS elements have limited browser compatibility. You're better off using some old school javascripts until the release of the next generation browsers.

The best x-browser solution I've used is with CSS. The basic strat is to change the <a> to display: block; and give it the same pixel dimensions as the image roll over. Both states of the roll-over are included in the one image file which makes the image 2x the width of the <a> block. The rest state for the link gets the background image aligned right, and the hover state gets the background image aligned left. You get the idea....

Has been tested in IE FF NN Opera, Safari and a host of others - no issues.

Something I've been wondering. When you use the pure css solution for image rollovers especially with somewhat larger images, there is this split second in the browser where you can obviously see it switching images. In IE there's even a black background. This looks kinda buggy and was wondering is there's any way to prevent that from happening.

I understand that this is no issue for the JavaScript solution as the images get preloaded in that manner.