How to make rollover pic?

[keturahuriel]

I have been using dream weaver, but the show code thing doesn't work. It only shows the design, so I can't go look at how to make a rollover. Can you explain or give a link to a tutorial on how to make a rollover pic?

[virthen]

I think most people use javascript to accomplish this effect. Just search the web for javascript rollover images and you'll get a plethora of pages that will help you with this. Basically what happens for rollover images is there's a normal image that shows up on page load. When you mouse over that image, a second image (your rollover image) is 'swapped' for your original image, using javascript. So you'll have two images for each link that you want to have a rollover for.Here's the first link that came up for me when I searched for javascript rollover images. rolloversLook through that script and see if you can make it work with your site.

[jeffman]

As long as you're using a strict doc type (for IE7) you can get very effective results using the :hover property of your image. I assume it's a button or something? The snippet below shows the whole trick. You'll have other style stuff, of course, but this is the basic. Instead of using an image per se, use an image as the background of a button-shaped, button-sized div.

.but {	background-repeat:no-repeat;	background-image:url(path/button.gif);}.but:hover {	background-image:url(path/button_hover.gif);}

[owosso]

As long as you're using a strict doc type (for IE7) you can get very effective results using the :hover property of your image.

Does this only work for IE7? Any luck with IE6?

[Synook]

No, you need to enclose your image within an anchor and reference a:hover img

[newceylon]

Why we can not use CSS rolovers effectively with I.E 6.0

[Synook]

Because they (the IE 6 team) didn't bother to implement it properly. Just like they didn't implement a lot of things properly.

[rzea]

As long as you're using a strict doc type (for IE7)...

Probably I didn't understand but I used Transitional Doc Type on my website and rollovers work fine on IE7 and IE6.--One easy way make a rollover image is more or less how Deirdre's Dad coded it but using a DIV (for that matter any HTML tag would work too like a <p> or <span> or <h1>, etc.), optimizing the CSS a bit and using just one image, and with Synook's comment about adding an anchor.This would be the basic code to use:

div.image a {	background:url(image.gif) no-repeat #fff 0 0;}div.image a:hover {	background:url(image.gif) no-repeat #fff 100px 0;}

This method works in any browser, yes, in IE6 too.Hope this helps.