image rollovers

css and js or plain MM functions?

[natty]

hi all,

just wondering what you do for image rollovers..
plain javascript linked with a preload images function, or with css classes for the background image/color changed with another function?.
or do people simply use the DW MM functions?

tia

[Bernard Marx]

Plain, no-script, CSS rollovers make good sense, and are always gaining ground.

If you use the type that combines the image¦rollover into one image, then uses CSS to shift the background-position, then there's no need for preload, and server calls are cut by half (or more if you want to push the idea further).

[natty]

thanks for the reply as ever bernard.
image rollover image, shift position..?
cant say i ve heard of that one, is that like having a single image for both states with one above the other, and with a css :hover changeing the positioning of the image so that the previous state is cropped?

or did i misunderstand that completely?

that sounds like it might be a little annoying trying to get the correct part of the image to show reliably across browsers.

[Bernard Marx]

I think we're looking at the same menu.
But the image in question is a background-image, so there's no need for any clip property.
I haven't had any problem so far (but I haven't experimented with all doctypes and so forth). There are things to watch out for:

1. We're using an <a>, which is strictly an inline element. For strict browsers, this needs to be styled as block (or better inline-block) so that it can be given width & height.

2. Watch out if there's any padding involved, because then we encounter the usual box-model problems that will need to be worked around.