Enlarging Images with a Rollover

rollover, images, enlarging

[jjwmaster]

I am working with a piece of code, that allows an image on a page to enlarge when the user rolls over it. The problem that I am having is that when the user does this the old image, the smaller one stays there. Is there any way of making the smaller image disappear on the rollover, and have the new one replace it?

I tried this code before:

<img src="image_small.jpg" width="550" height="200" onmouseover="this.src='image_big.jpg';this.height=400;this.width=1000" onmouseout="this.src='image_small.jpg';this.height=550;this.width=200" />

But when it enlarges it would expand the page.

[Jesdisciple]

Yes, you need to make an absolute-positioned <div> and put the big image inside it. You can use CSS to position and hide it; when the user rolls over the small image, put the big one in the div and display it (or if you only have one image, forget the div and show/hide the image).

Also, if the big image hides the smaller one the user will expect the mouseout to be on the big one. A mouseout on a hidden element would get annoying fast.

CSS is the recommended way of styling/formatting things whenever possible, by the way. HTML attributes and JS are needed for some things, but CSS should be your first try.

[edited by: Jesdisciple at 3:31 am (utc) on June 12, 2009]