What's the Best Image Rollover Technique?

I've found loads of different image rollover tutorials online. In some instances, JavaScript is used. In others, just CSS is used. Sometimes, one image is enough. Other times, up to three images are required. A common compatibility problem seems to be a flickering of the images in IE 6.

All of the different tutorials that I have come across have left me confused. Can anyone point me to the best technique that works well with all browsers? I would prefer a CSS technique with just one image, with no threat of flickering.

 

Just move the image.
here is an example i made: http://weihnachten-volksmusik.ch/

You give the image a margin-top when a:hover and the a needs a height;, overflow:hidden;, display:block;.

a, a:hover{
height:50px;
overflow:hidden;
display:block;
}
a:hover{
margin-top:-25px;
}

The Rollover Image part should be on the bottom.

 

Thanks, man. But what happens when images are disabled? Using your method, there will be no menu.

 

I've always used a single image for each button, which can show several states (Normal, Hover, Active). Then write in some CSS that moves the background image up / down or left/right accordingly. I think this tutorial pretty much covers it: http://www.websiteoptimization.com/speed/tweak/cssrollovers/

As for IE6, personally I've stopped supporting it in my designs and include an IF statement somewhere on the site asking people who use IE6 to upgrade to a modern browser. Just how long are people going to keep supporting IE6 and 800x600? We have to move on at one point or another, right?

 

I agree, man. The problem is, I pay for my traffic, so it's in my best interest to be as compatible as possible.

Do you know if your method flickers?

 

So MhW, are you honestly prepared to leave that "upgrade or go to browser support Hell" message up on your sites until 2014? Because thats when Microsoft is going to stop supporting IE6 (even the new Windows Mobile will be using IE6 in its browser engine).

Also, "800x600" doesn't mean anything. To ensure proper printing of the entire Web page on a standard size piece of paper, you should be designing for a minimum of 750px anyway (this is one reason why elastic layouts are so popular). Not only that, but using a larger monitor doesn't mean the user will always have the browser maximized -- many people leave space available so they can view other applications (such as their favorite chat program) without having to minimize the browser window.

Then on top of that you also have netbooks (with their smaller screen sizes) and of course mobile devices such as smart phones that are capable of viewing an entire Web page in standard layout mode. Are you going to tell them to change to suit YOUR desires instead of meeting THEIR needs too? "I'm sorry, but apparently you were dumb enough to buy a netbook or iPhone*. Please upgrade to a traditional computer with a minimum screen resolution of 1024x768 and make sure you maximize your browser viewport because I don't care about you or your particular needs." just doesn't cut the mustard, if you know what I mean.

* just so we're clear, I don't have a netbook, but I do have a BlackBerry -- I just can't justify having an iFail (aka the "Fisher Price My First Cell Phone").

Oh, and since we're talking about image rollovers, this is what I use: http://www.pmob.co.uk/temp/navimagereplace.htm (but with a SPAN instead of EM since I stopped caring about Mac-IE years ago)

 

True. Good point, man. We must, of course, be as compatible as possible. One rep point.

I think IE 6 is the limit, though. I wouldn't bother coding for IE 5.x anymore.

 

Most of the time, what I do in IE6 works just as well in IE5 as it does in Firefox, Opera and Safari, so no worries for me there.

 

Honestly...yeah. It's cookie based and certainly not obstructive in any way. If they choose to close it they don't see it again until they clear their cookies. Besides, cPanel says 0.3% of visitors use IE6, I don't see how showing the message and "asking" members to upgrade to the newest version of IE or Firefox is going to do anybody any harm. I get what you're saying, but less and less people are using IE6.

Good points, will definitely consider the fact users don't always have maximised windows. However I'd argue that printing web pages (certainly in my niche) just isn't done any more. If it were, I'm sure a "click here for printer friendly version" link would suffice.

Again, good points. As for the netbooks I have a Samsung NC10 which is used to check both my and client's designs. Can't say I've had a problem so far. As for the mobiles, this has already been taken care of using a PHP Mobile Detection script in the header, this redirects mobile users to an entirely new page which is completely mobile friendly (fluid layout, no images or background-images, etc etc).

 

Well in this case then I could see it being used (for such a small minority). Unless your site happens to be as large and popular as oh... CNN that is.

Or using proper semantic markup that separates the structure from its presentation. Then there'd be no need for a separate printer version. Just hand it off to a printer stylesheet at worst.

Again, with semantic markup that wouldn't be necessary most of the time (especially for content sites, though ecommerce sites and those sites with lots of forms would benefit from a specific mobile version). A handheld stylesheet will usually suffice for those devices.

 

Exactly. You see on my latest project (premium phpBB3 styles) the actual page content is going to be fairly wide anyway as it will need to handle two columns of reasonably sized thumbnials and associated buttons (Live Demo, Buy now etc...). It would only take half an hour or so to convert the layout from fixed-width to fluid, although considering the width of the content (around 900px in total) it wouldn't be worth it.

Like you said, at least if I redirect mobiles to an mobile-friendly version of the site and give them the option of viewing the full version then I needn't worry so much about making the main site fluid.

...this is the part of Web Designing I hate

 

Lawlz, iFAIL.

The reason I don't do mobile anything re web is, you can go ahead an make your handheld.css... which half the phones then promptly ignore because the "good stuff" is on the desktop-browser version, and then they might puke on that (seeings how it's made for desktop browsers and all...) while others look at both stylesheets instead of just the handheld... so I saw on one of Mike Cherim's pages where you can click on a menu to choose your stylesheet, but this either requires a cookie (usually added by Javascript) or some sort of server session, more work for the server and likely some user agent somewhere gets around it anyway.

I mean, I feel like I'm wasting my time with handheld.css, and at best I only have online demos of mobile browsers (while I like James' idea of going to a mobile store and asking the friendly sales staff to show off the internet capability of each phone and PDA, specifically your site, it's not actually that practical for development, just maybe last-minute checks). I'd like them to agree to a standard, or do like Opera Mini and try to act like a desktop browser (though the way all that requesting and scripting drains the batteries is silly).

Re best image rollover/replacement technique: while I have a soft spot for Gilder-Levin, there are times where it doesn't make sense. Instead of making a multi-state button for each button, I'll go ahead and make a single image for the entire menu (if it's a menu).
Like this (not my design or images, was a site someone else was making on a forum)

 

Okay. Now I'm confused.

Which one of these is best to use, keeping in mind usability and compatibility?

Option 1
Option 2
Option 3

 

All three are decent.

The differences are:

the last one, the monkey one, lets the text of the anchor show through. They didn't need a special font to appear, so the only image involved is the whiteish background gradient thingie. This is a very simple, easy technique, low on code, no extra markup, and text always shows. It's accessible and looks nice.
However you can't use it if you need special, funky text. While the monkey version has a set of fonts listed, and they're pretty normal fonts, the font that appears on the user's screen depends totally on what fonts he or she have on their machine. A linux box won't necessarily have Arial or Helvetica if it matters to you.

Paul's is nice (the first one) and that's called Gilder-Levin. It does use an extra element (the em) and as Dan said, unless you're supporting IE for Mac, use a span. So long as the image isn't transparent, it'll cover the real text underneath... until someone without either css, or images, or both, shows up. They get text to read so it's accessible.
With the em, it's more code than the monkey version.

The middle one, mine, is pretty much the same as Paul's except
(for firefox cause apparently other browsers don't let use style alt text)
I styled the alt text, including hover and focus colours
and I used one large image, which Paul could have done (and surely has done in some other demo of his, he's aware of sprites)

Mine's more code. Whether you go full-out or stay with the monkey version depends on how much code you want to throw in there. Either way, it's most awesome to have just one image and slide its position around, rather than a separate image for each button or each state. A single 100kb image takes less time to load than 10 10kb images, simply because your browser has to sit and ask for each one, and the server has to send each one individually (my browsers can all ask for at least 2 of not 3 images at once, but I think that's the limit, and it depends on your pipe and the server's speed and how busy the server is, yadda yadda...)

Usually just having an image with appropriate alt text is fine, and you *can* do rollovers with HTML img tags but there are some drawbacks : )

I use Gilder Levin when I still want the text hidden underneath to be styled nicely for those without images. Will your visitors be from some busy wifi internet cafe where turning images off lets them surf faster? You might want to style your text then. And since alt attributes can't have other tags in them, I'll throw an image on top of stylable text with spans and junk in them for extra styling.

But all three are decent options (again, mine is I think the most code though).

 

Stomme Poes, a brilliant response, as usual.

I was not permitted to give you a rep point. I must have given you one recently.