[MK3Design]

What is the best way to do image rollovers? There is many ways you can do this I know, but what is the easiest/fastest loading way? The type I use always takes a second or 2 to load.

Examples on how would be helpfull too, thanks

[Intrinzik.v2]

the easiest way (using css) is to create one image with both the regualr image and the rollover image. Then use some css o when once the images is hovered its moves... like so;
http://www.tutorio.com/tutorial/pure...mage-rollovers

[pgo]

http://www.wellstyled.com/css-nopreload-rollovers.html

No preload needed. All it takes is downloading the image. Rollovers have no delay. Far superior in every way to JavaScript rollovers.

[Jack000]

fyi, the background-position method still experiences a flash in certain versions of ie.

I prefer putting the over image on the <li> tag, the up image on the <a> tag, then assigning background-image: none to a:hover. Seems to get rid of the problem.

[pgo]

Originally Posted by Jack000

fyi, the background-position method still experiences a flash in certain versions of ie.

I prefer putting the over image on the <li> tag, the up image on the <a> tag, then assigning background-image: none to a:hover. Seems to get rid of the problem.

That'll work, too. I've never experienced the flicker using the method I posted, but I'll take your word for it and bear that in mind.

[John Good]

the only trouble is that the user downloads images he might not see, if he doesn't use the buttons.
but we can live with that.

[djeglin]

Sprite rollovers (as referenced above, also in this article are by far the best way to deal with things like this. The loading time is smaller for one large image than the equivalent size in smaller, sliced up images, due to the lower volume of sundry image data.

Happy rollovering

David

[canglan]

Put 'em together and use offsets. :-)