I’m constantly surprised at the ways in which CSS can be manipulated to great visual effect. It takes people like Dave, Doug, Søren, et al, to keep that CSS cutting edge as sharp as it is. Excellent work.

(The final green shape needs a tweak though. When hovering in Mozilla 1.5 on XP, the neighbouring grey shape edges out a touch.)

The introduction to this article reminded me of Boulderdash on the Commodore 64. That early games computer had several character grids you could hold in memory. Boulderdash cleverly switched between these several times every second to give the effect of animation. I once looked into the code and saw an earlier abandoned character set, with much cruder designs. Why is this important? Er, it’s not, but I thought I’d mention it.

Also the Commodore had built-in hardware sprites, which floated over the main character data used to make a screen. If only we had those in CSS…

The 2 separate active maps for the overlapping shapes is one of those now obvious, simple ideas I wouldn’t have thought of. Thanks for saving the headache.

As Chris Hester above said, the left green crescent is a bit off (tested in both Firefox and IE6). Not sure at first glance whether it’s a positioning or a graphics problem.

Also, to nitpick, a slight advantage to saving individual rollovers for graphics (at least in GIF form) is the ability for each image to have it’s own set of 256 colors. It’s not unlikely, given sufficiently colorful images, that the 256 color limitation involved in placing all active and non-active states for multiple buttons in one GIF could visually degrade the overall effect.

This basic idea had occurred to me a while ago for just the reason that Dave Marks mentions in his comment above. I was going to demonstrate it by doing Amazon’s nav bar in CSS with one master image. Needless to say, I didn’t get round to it. Such a simple nav bar lends itself perfectly to this technique.

Good, well written, expansion on a well known technique, and as already pointed out, your demonstration shows good examples.

In regard to single image vs lots of images…
1) As already mentioned there will be some memory saved by combining images that share the same pallet.
2) In particular, GIF images can store long solid-colour horizontal lines in very small memory space.
3) Splitting in to many images allows most peoples web browsers to download them faster because they can be downloaded simultanseously (only helps of fast connections).
4) I may have missed it in the article, but I don’t think you mentioned the main reason for having a single image, is if you had a different ‘after’ image, it would not start downloading intil you hover over it, (So putting the before and after images in a single file removes the need for a JavaScript ‘pre-loader’).

Here’s another example of this technique in use: http://www.alpha-matrix-design.co.uk
I’d welcome comments and constructive criticism, but direct it to me not to this discussion board.

To those experiencing browser discrepencies—it’s possibly related to cache. If you’ve configured your browser to ‘Check for new page every time’ or similar, it may be trying to re-download the image for every hover. Leave your mouse over the link a bit longer, give it a chance to show up, and it should.

Also keep in mind that this is mostly a developer setting. End users won’t usually have this selected, so you needn’t worry about it too much.

Perhaps they don’t appear to be degrading well as Dave hasn’t put the list text in any of his examples? If the text was there, then you would see a fine unordered list, or at least you should be able to.

Perhaps Dave would consider adding list text to his final examples to demonstrate how it degrades?

Here’s a test case with actual text in each link for the benefit of testing in NN4.x. Note that I’ve used Phark image replacement here, which doesn’t work in IE5.

“I’m surprised that things don’t fall apart when you mouse over a place where two boxes overlap!”

Whichever link has a higher z-index gets priority—so in a corner where two boxes overlap, in this case the one that appears later in the source code is the one that gets triggered, and the other is ignored. You can pick and choose which links get priority by explicitly setting a z-index value, but I decided to just let them fight it out in my examples.

Chris—the examples you cited weren’t meant to work at that point in the narrative; only the final examples in each section are fully functioning with mouseovers.

Martijn—funny you should mention the Complex Spiral, I considered rebuilding it with background-image positioning for this article, but decided that was too much of a tangent. I think it can be done, it just wouldn’t end up fixed-position.

Great article, it lacks a bit in code originality, since it uses lot of the latest articles’ code (Image maps, rollovers, FIR, etc), but it certainly gives users a lot of ideas and code examples. It’s what everyone who reads ALA has been thinking of doing once, but never came round to. A really useful reference, definately a keeper.

I see no obvious reason why buttons like in the icon example couldn’t be spread across the content. Not that doing such is a good idea from a usability standpoint, but you could make even 2 different sets of buttons and still use the one master image idea, right? You’d just have to reposition accordingly.

Gifs were used in the example but as long as the individual images were kept small is there any particular reason to avoid jpgs? My thinking here is I’m currently building a site that will have several photo galleries of about 12 thumbnails each. If I want to go with a rollover effect for each thumbnail (say a sepia toned image and a full color image), would the bandwidth benifits of this technique still apply to the use of jpgs? Again, I don’t see any obvious reason that it wouldn’t, but I’ve learned not to assume too much.

Why does everyone use LIs when they are not neccessary? It’s extra markup for no reason!

Because, if we’re talking about navigational links, they *are* a list…A list of links. A list is a list is a list, whether it’s a grocery list, top ten list, or list of links.

Not to mention, by marking up your links as a list, it gives *incredible* flexibility if/when you wish to change the layout of your site. Want your nav running vertical down the side? No problem…just change the CSS. Want the nav to display horizontally across the top? Cool…change the CSS.

If you’re so worried about an extra LI around each link, I think you need a new hobby.

You have a way of thinking out of the box (no pun intended) that is very refreshing.

Yesterday, in your mezzoblue post, you showed us that by leaving out the left and top properties in a positioned element you can effectively place an absolutely positioned block in the normal flow of the document. This article illustrates how it can be used to great effect when your child elements can be positioned inside their parent element - a positioned parent element that is still inside the normal flow of the document.

I always thought that you either use float positioning or absolute, and that mixing the two were impossible. With this technique you have demonstrated whole other worlds of possibilities. I think this is the real innovation of the article. Your rollover examples are only one application of many to come.

Derek—definitely. You could build thirty different sets of buttons on one page and have them all draw from the same master image (though if you’re trying to construct thirty sets of buttons you might wish to re-evaluate your strategy). No reason to avoid JPG or PNG, any image format should work fine. Actually, Skyline (the first example in the article) makes use of JPG. Your particular example would be an interesting case study; JPG compression works a little differently, but you might still see enough savings in overhead to justify it.

GIF does run into limitations when you try to cram a whole bunch of differently-coloured images into the same master image; you can tell on the blob example, even though it’s 256 colours. Just something to keep in mind; JPG might be preferable sometimes. This is one area where old-school slicing and dicing has a leg up, at the expense of the multiple colour tables.

Terry—the positioning trick is just a feature of CSS, has been for ages. Though I have to admit, I’ve known about it for a while but never actually used it to my advantage until recently; it was a quirk more than a feature until I really understood it.

Subrisi—I thought about that for a bit. As long as you’re trying to fit your sprite inside very specifically-dimensioned containers, then yep, you should be able to do it. But in practice you’ll probably find it doesn’t make much sense; a larger container will cause the other bits and pieces of the master image surrounding your sprite to poke through. Might be an interesting experiment though…

Dante-Cubed wrote:
>>>
They’re there for a reason: I wanted the square bullets. I was talking about using lists for no reason at all. I have a reason.
<<<

I hope you’re joking.

But in case not: You don’t use lists simply because you want square bullets. You use lists when what you’re dealing with actually IS a list. A list of links is, by definition, a list.

Sure, using <li>:s because you want the square bullets is a reason, but it’s not a good reason. You might as well say “I’m using them because the pope has 215 purplegreen anecdotes stuffed in his seventh kneecap on damp and lonely thursdays”. ;)

I have to say this is absolutlely brilliant. Thanks Dave, you have once again proven your abillity to craft new ways to use old ideas… This will no doubt become common practice among CSS developers for years to come.

Jemal:
“Dave: the NN4 version you linked in the comments leaves blue lines stretched across the page from the left margin in Firefox 0.8 under Win98. Not seeing any of the problems other people encountered.”

I actually ran across this technique while reading a Danny Goodman DHTML article in 2000, though he used JavaScript rather than CSS. After Zeldman implemented the Fahrner Image Replacement on the Daily Report, I got to messing about with combining the techniques as Mr. Shea has done.

While I never actually finished my explorations (testing/hacking in Opera and IE/Win and a multitude of small variations on the basic principal created a black hole), some of the ideas that came out of the experiments included:

—using an animated GIF for the :hover state

—adding additional :visited and :active states for the buttons

—including a ‘current page’ state to show the user where they were in the site

—using one image per link (rather than one image per state) to increase positioning flexibility

—using an acutal image within the <a> and positioning that (rather than a background image) within a block-level element with overflow: hidden, so that visitors with images disabled but CSS enabled would have alt text available

—using a single-pixel transparent GIF (horror!) sized with CSS to get the alt text if images were off but CSS was on, and a span with a display of none to provide text if images were on and CSS off/unsupported; the obvious drawback is that screen readers will read the link text twice, which is unseemly but perhaps preferable to having the links entirely hidden to users with images off but CSS on

For a while I wanted to have an image map where the images were separate from each other, but until now I had no idea how to do it.

I’ve changed the navigation on my website so it uses this sprite system, but I’ve made a few changes. In case you were wondering, I got the hover images to work in Opera using a bit of JavaScript. It’s a little bit bigger, but it works for me!

If you want to see it, please check out my homepage: http://www.boxofjunk.net/

Ahh CSS you solve all of my woes. If it hasn’t been said before, I’ll say it again (and again and again): excellent article. Really ingenious utilization of CSS here—I immediately ran to my computer to make my own!
I think trying it with animations would prove interesting…

On an aside(sorry), I am wondering if anyone knows the url to a website that illustrates designing css layouts using colored in borders. I want to pass that along to a friend who could really use it. I think the site in question had a rose as an example graphic?

In any case, everyone at ALA is doing a great job—thanks for feeding my brain with wonderful things :).

I love this technique, nicely mixing some others to create an easy to reuse one.

There is a lot of power in the background positioning technique. Right now I am using it on my new portfolio site, and I use it for a rollover and highlight state of an icon rather than the nav itself.
check the work in progress, I will write an explanation document for an internal DOM training.
http://icant.co.uk/index.php

I must say i’m super impressed by this technique.
I’m learning css right now and designing a few webs sites. so i was wondering how i should slice my layout and implement nested div all over the place to make it work.

But simplicity is always mother of reason.

I tried to adapt this technique to my navigation bar, adding as well a piece of css to show the current page status ( like in the i3forum page ).Then i removed all the script for the slicing script in an external css. but now it’s not showing anymore.
is there an issue if this technique is externalized ?

I have tried something like this a while ago when i saw the fast image replacement but I tried using animated gifs which would work in everything but opera. for some reason it didn’t like using animated gifs as backgrounds.

I’m using this teqnuiqe, plus some other stuff i figured out myself (positioning a little box somwhere else on the page on :hover), only using CSS, now it looks like the CSS is going to be very big for a very small page!

Wonderful concept! It solves and simplifies a lot of issues I (and most likely many others) have had problems with.

Dave, your example at http://www.mezzoblue.com/tests/sprites/blobs.html causes my Win/IE6 to have a delay of 2 to 3 seconds before showing the hover states. Mozilla’s doing it right though. And the skyline example in this article works fine in IE6. What could be the cause of this discrepancy?

Dante-Cubed, please correspond directly with people with whom you want to quarrel on a more personal level. I’d encourage others to not respond to your baiting any more.

i’ve slightly changed dave’s code to work with text within each of the sprite boxes. it works in ie6, ie5.5, moz on pc and safari and ie on osX. i’ve had to use the box model hack, which is kinda ugly… so if anyone has a better way of doing this, please let me know.

Thank you Dave! I have been thinking about my nav for awile and was using separate images for each menu item. I’ve immediately implemented it on my subpages, and it works great. This thing really saves time when making alternative style sheets.

Hypothetically, one could put almost all of the images used on a page into one jpeg, and then when it comes time to redesign / create new style, all that would be needed to be edited would be the master image (then a find/replace on the css).

Avoiding a hack in that particular example would be easy, just add span tags around the links then replace the 20px padding-right in #sidemenu a with #sidemenu span a 20px <em>margin<em> instead. Fair enough, some designers would rather use a hack than ‘code-bloat’ but that’s down to personal preference.

In case of “CSS on and Images off” a good solution is Gilder/Levin Method mentioned here:http://www.mezzoblue.com/tests/revised-image-replacement/
(yes with extra spans and no transparent images but i think it’s worth).

Image flickering:
When you use that technique the flickering is very annoying because the text become visible on every mouse over. So I have created a behavior to solve this issue. (The behavior is really simple, adds a new image between the text and the span (based on the CSS background-image absolute URL))

Here:
http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/
(The page is in Hungarian but i hope you can understand the source code :)

There is a another silly thing in IE. The mouseout doesnt chenges back the hover state of the span inside the link. We should add an extra a:hover {} rule beside the a:hover span{} and then everything works.

In addition to the potential overall savings on filesize due to reduced overhead, there is also a performance benefit: only one trip to the server is required to fetch the images. This, in my opinion, is the more important gain (outside of cleaner and simpler html and css).

First off, I think this article is world-class. Dave took a good technique (Pixy’s rollovers), and improved upon it.

My question is really more around image replacement, so if this isn’t the forum for it, please let me know (politely!).

In an attempt to add text to the links in the Buttons section (#iconmenu), I’ve tried to repurpose the Shea Enhancement (Gilder/Levin IR w/ title) summarized on mezzoblue to work with links, instead of an h6 and nested span. I can’t seem to get the <span> to /not/ obscure the <a>. In other words, the image replacement works, but the 100% span covers up the <a>, and I lose the rollover and the cursor change.

I’m elected not to use the text-indent: -1000em method of IR, so without gettting into an argument about which method is better, can someone point out the approach to use to incorporate Dave’s “Shea Enhanced” IR tech with the #iconmenu example?

Very interesting article. But why, in the “Irregular shapes” section, is a second “after state” image required? Could you not spread out the pieces in the after state so that they do not overlap? This might make the math for positioning the after state pieces a bit more complicated, but it’s something you’d only have to do once, and your after state image would be smaller and non-redundant.

I’ve just tried you examples, but I still experience slight delay in IE 6. Done some experimenting myself (http://www.inet.hr/~mdugonji/webdesign/experiments/image_slicing/), but my try isn’t satisfying neither.

Will whoever is trolling my SF History board please stop. I know this is off topic but they are people from this ALA forum with the I.P. Addresses:
81.5.138.228
172.194.21.72 (someone named Mikey)
I’m assuming the latter is the one who posted the “I love PPK” trash. Please stop. I will stop trolling here if you stop on my site.
Ray, Spook and Mickey please stop. If you want to deal with me email me, don’t post rubbish on my SF History site. Just because I might troll here is no excuse for you to do the same.

I’m not sure that this technique is the end-all be-all solution that others are making it out to be. There’s a sweet spot in a page’s design where multiple connections to a webserver will almost certainly result in a faster display of images than this will.

Consider this: you have an extremely image-heavy page, with a few nav items that each have a largish filesize. By concatenating all of these nav items together, you need to wait until the entire file downloads before displaying _any_ of the images. On the other hand, with multiple connections to a webserver, your nav items will be guaranteed to show up as soon as they are downloaded. If your nav item is over 2k, for instance, the image header filesize overhead is negligible.

This is the age-old serial vs. parallel debate, just in graphic format. If establishing parallel connections requires just a bit more overhead, and bandwidth is constant, what’s the point at which a serial connection is a better idea? For smaller pages, sure, knock yourself out, but for any decently-sized page (say 40k or larger) I just don’t see this method as speeding up rendering times at all.

Loved the article, only problem now is I have to go and RE-DESIGN my image maps! But probably a good idea to do so anyway. I was also intrigued by the other recent article on image maps (see: http://www.alistapart.com/articles/imagemap/)

One question though.

In the blob example by using appropriate title tags one can get the name of the link to pop up but I wanted to employ the effect used by eric meyers (old but tested method) of pop up text (see:
http://www.meyerweb.com/eric/css/edge/popups/demo.html) so that the link name would appear somewhere else on the page, BUT I can’t seem to get it to work in using this method? Is it because it is within a list? Should I give up? is there another more ingenius way?

I’m NO expert with css but I love trying out the new methods people keep coming up with on alistapart, GREAT site.

Marko:
My behavior (.htc) doesnt solve the delay but the flicker. The delay is beacuse IE downloads every time the image again and again.
1. Mouseover/mouseout
2. IE:Turns of the image
3. IE downloading the image (the delay)
4. download complete IE show up the image

Sam Ingle:
If you set the cache properties in IE to “every visit” (or something like that) you should see the effect. (image flicker or text shows up)

More about flicker in IE:
http://www.fivesevensix.com/studies/ie6flicker/

This one is an excellent idea for my site, which can be used to select Eastern, Central, Mountain and Pacific zones in the United States before selecting specific States. I would appreciate to know the quick summary of Pro/Con of that design for all browsers wherever possible? I aim to satisfy my audience to the best possible, even for text-based lynx users.

Sorry to wander off-topic again, but remember this is supposed to be a discussion. Everyone doesn’t have to like what has been presented. If Dante doesn’t feel that this is a worthwhile use of ALA’s bandwidth, then so be it. He’s entitled to his opinion, even if you don’t agree with it.
I know I don’t. This is an interesting visual design element. And let’s face it, Lynx compatibility and standards compliance aside, visuals are what draw in your guests, almost as much as your content. And that’s my opinion.

I just tried out this technique on a site that has buttons which require a number of states: normal, hover, selected, and disabled. What I found most useful was the ability to add and modify the button states just by swapping out one image. That way, I know that I’ve updated all the states of all the buttons and won’t be surprised by a rollover state on a selected button that has the old font, for example.

The problem I have is that markup that consist of a list of empty links is rather useless when I am using a screen reader or have CSS turned off. Furthermore, a sliced image would give me alternative texts for every image.
Now, to change this all we need to do is to add a text in the “slices” and hide this text with another FIR technique, for example
http://www.kryogenix.org/code/browser/lir/ .
Wouldn’t that be a better solution, as it does fall back to a fully accessible list of links no matter what I do?

I never said I didn’t like the technique. It’s a bit too complicated for me, but still I like it. I don’t think I’ll ever need to use it in practice, though. But ya never know.
I was thinking of bringing Javascript into the mix, not for the rollovers but maybe for clipping. Not at all sure how I’d do this.

Jamie, that’s a very interesting experiment. Although you might be accused of “dumbing down” text for readers. (“Why can’t they just learn to read the original script!”)

This is the kind of dynamic effect that can only occur on the web, not in print. I’m all for it. But is there a way to make the rollovers bring up standard text, not images? (Perhaps using generated content.)

Chris, thanks for your comments.
It ain’t so much about dumbing down as about making it readable for those who can’t see so good.

I like the idea of doing it with real text in theory, but can’t really see a way of doing this and staying with pure css and static html - especially given the way different browsers display fonts etc.

I’ve just modified it slightly so there is a no-style version now - this divides the text into a bulleted list which is a bit odd, but much better than nothing. Would be interested to here other’s suggestions for how to do this better:
http://www.mch.govt.nz/mch-only/olde-text.html

Well, the thing that bugs me is that we add links that lead nowhere for a visual effect. In your case, it is not wise to make the flowing text a list, but if you use this technique to spice up a navigation, then we would need it.

It once again boils down to hover effects on elements that are not clickable being misleading. If every browser supported hover on every element, that’ll make it easier.

I just added the text and the technique described at
http://www.moronicbajebus.com/playground/cssplay/image-replacement/

to create a real navigation with this:

http://icant.co.uk/buttons.html

works in IE6 and Opera7 here. The only problem is the same with every IR technique apart from the javascript ones, that it fails visually when images are turned off. When Images are turned off and CSS is turned off it is fine again (easily testable with opera)

It is realy great example . Long time ago when I
have seen Pixys original way I made this , it dont look like css , but it is . Has three state like normal button . So here it is http://www.kralovskydvur.com/dynamiccss/ahover.htm
. Please wait a bit for image 24kb

It’s funny how Web Standards promoters contradict themselves. WaSP and PTG says that Web Standards will lead to simpler, cleaner, and leaner documents. However they encourage as to use uls for every sort of list, adding a lot of extraneous markup. Funny.

That aside, the desicion on wether to use lists for this or not could go either way. I would just use a DIV with maybe some spans. Maybe lists would be better, since they have shorter names (UL and LI as opposed to DIV and SPAN).

Just thought I’d wrap up this argument.

I even thought or using an IE behaviour htc to do this, but that would be too browser-specific.

Until navigation list (NL) is added to all browsers, then I don’t think designers have a better choice than unordered list. Semantically speaking, a list of links would be the best scenario for establishing a navigation set in terms of raw HTML [for non-visual users].
Dante-Cubed, this code is far, far, far cleaner then any image map method of old or relatively new. Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.

Dante wrote:
>>>
It’s funny how Web Standards promoters contradict themselves. WaSP and PTG says that Web Standards will lead to simpler, cleaner, and leaner documents. However they encourage as to use uls for every sort of list, adding a lot of extraneous markup.
<<<

Of course people use simplifications. It’s not technically true that web standards automatically lead to cleaner documents; e.g. of course if you have a valid document and remove the doctype (thereby making it non-standard), it’s going to be smaller in filesize. But in making the case for web standards, it would be too time-consuming to include all such little gotchas. The listener would lose interest before the speaker had a chance to get to the good parts.

It’s also an unfortunate fact that the term “web standards” is widely used as if it meant “purely semantic XHTML code coupled with CSS”. Font tags might be looked down upon even among the most passionate CSS haters, but they’re still part of a so called web standard (they’re officially called “recommendations” by their creators). So, web standards can actually lead to terribly bloated code if you use the “wrong” standards (or even the “right” standards) the “wrong” way.

Anyway: Using ul:s for every sort of list is NOT “adding a lot of extraneous markup” (though it could be “adding wrong or vague markup” if there’s a better list type than ul available). For the last time: A list is a list and should be marked up as a list, just as a paragraph should be marked up as a paragraph.

(It could be argued that the written content of a page is technically a list of paragraphs, but that, IMHO, is not the semantic definition of a list in HTML. The items in a list should have something relevant in common other than all being parts of the content.)

So, no, “Web Standards promoters” do not contradict themselves in this case.

>Anyway: Using ul:s for every sort of list is NOT “adding a lot of extraneous markup” (though it could be “adding wrong or vague markup” if there’s a better list type than ul available).<

Oh, there is: The Menu tag. It’s just like UL but has no bullets. Since most people “tame” the lists by removing bullets it doesn’t seem to be a problem. Of course if you DID want bullets you could always do:
menu {
display: list-item;
}
<menu>
First Item

There’s a reason why things become deprecated. Usually it’s because something better has come along. With the menu element and the ul it’s kinda like leaded and unleaded gas. Most sensible people understand (well…those with half a brain anyway) the drawbacks of using leaded gasoline. Sure…leaded gas is still available here and there. That’s called backward compatibility. However, just because it’s still available does not mean you should still use it given the choice.

Could you imagine the crap that would be in the air if we all still used leaded gasoline. Think how bad it would be in a large city of several hundred thousand. Say a city like San Francisco. It wouldn’t be as beautiful as it is today with all kinds of cars running around using leaded gasoline. Leaded gasoline is still available “here and there” as a transition. The only people using leaded gasoline are those with antique automobiles, those that can not afford to buy a new auto and those that don’t give a shit about community. Either you understand that or you don’t.

Dante wrote
>>>
Menu is deprecated but still works. Just because something is “deprecated” doesn’t mean you shouldn’t use it.
<<<

As has been pointed out, that’s EXACTLY what it means.

At any rate, we’re talking about saving a few bytes per page. You might as well start removing all the line breaks from the source. Contrast that to the tens of kilobytes (per page) of unnecessary tables and font tags that “web standards promoters” (WSP) are usually talking about when they mention bloated code.

You see what you’re doing here, Dante? First you say (or at least imply) that WSP are over-zealous. Then you imply that they’re not zealous enough.

What I meant to say was that even though MENU is deprecated, it is still supported by browsers to provide backwards compatibility. I think even though some tags like XMP have been deprecated for years, they’ll be supported by IE for many years to come for backwards compatability. You can still use MENU. Besides, if it’s deprecated it won’t do anything. You can have semantics (UL becomes the much more semantic MENU) and use CSS to control what it does.
If you’re crazy enough you could do this:
<HTML xmlns:DC>
Blah blah
<DC:Menu>
Menu here</DC:Menu>
Anything you want
<DC:Navbar>
</DC:Navbar>

Chris,
I don’t understand how you’re making the text between the <a> tags invisible without the span tag… I tried “overflow: hidden;” in the <a> definition but it didn’t seem to do anything. Is there something else working in conjunction with this?

I’d like to stay away from
span {display: none;}
because screen readers can’t see the text.

If you want an example of how one of the points mentioned in this article is wrong, view the examples with Netscape 4. They do not degrade gracefully. In NN4 all you see is part of the image and nothing else. No plain ULs. No behaviour. A better way would be to import the styles so Netscape 4 can access plain content instead of almost nothing.

You rant about alistapart on evolt and you rant about evolt here. Both refused to publish articles by you. You whiningly announced you will retire from writing online articles, if that is all you can contribute here, then please retire from posting.

On page 11 of these comments, Jamie Mackay posted a great link to an experiment using rollovers to allow people to decipher a piece of script text, by hovering over the lines. I’ve just come across another great example like this. (I would have emailed this to Jamie, but don’t know his email address.)

For the stuff I do, I’d name this one of the top 3 articles on A List Apart *easily*. Not only is this innovative and clean, it’s better than Javascript and saves n00b schmucks like me from having to learn it! Ha ha :)

I agree this was a better solution tha javascript—kinda.
It’s a lot more complex; you must know the correct coordinates for the position.
Javascript is meant for adding usability anyway. Just don’t get too carried away with ditching [removed] you’ll need it eventually.

With this tutorial in mind, I retired to my CSS laboratory and started experimenting; I took a couple of accessbility aspects from Prof. Bowman’s “Sliding Doors” technique and cross-bred them with “CSS Sprites”. Then I started testing the thing in the various major browsers - here’s a code overview;

OK, I _think_ that’s pretty self-explanatory; if you have CSS on, you get a very nice graphical top bar. If you switch CSS off, you get neatly structured text. Trouble is, it’s working fine (on Windows) in Firefox 0.8, IE5.5 and IE6.0. Where the wheels seem to fall off is when you view the thing in IE5.01…although the initial (i.e. “off” state) display is perfect, the rollover image only appears on click, and then stays highlighted until anther link is clicked.

It’s puzzling, because Dave’s final (map) example works perfectly in IE5.01 on my machine, so it’s not a settings issue. I’ve tried removing everything from each list item except for the link itself - replicating Dave’s final example almost to the letter - and still it (mis)behaves the same way. What might I be missing or doing wrong, any thoughts?

<voice accent=“irish”>
project lead: ‘What’s that ya have?’
developer: ‘CSS.’
pl: ‘CSS. BRILLIANT!’
pl: ‘What do ya do with it?’
developer: ‘Well, I have found a way to make rollovers using only one image.’
pl: ‘And you make rollovers work in many browsers using only one image no matter where you are?’
developer: ‘Yes.’
pl: ‘Make CSS rollovers using one image…BRILLIANT!’
</voice>

Great technique, except that Google’s spider seems to skip over empty <a > tags. This makes sense, I suppose, but it means that if you’re implementing this and you care about whether or not spiders and blind people can view your site, you should probably include a hidden version of your navigation at the top of the page.

1- Because this map is a lot more complicated than the Blobs example, I needed to create 4 versions of the graphic rather than 3, as Inverness-shire was surrounded by so many other counties. The image is now a whopping 60k. However, I could go through it chopping out lots of areas in the 3 rollover maps and turning them white which would reduce the filesize. As Scott suggested earlier in this thread, I could go through the image deleting everything from the rollover state versions except the yellow bits, and then move them all up nearer the normal map and redo all the arithmetic. I’d guess the image size could be as little as 20k.

2- I’ve seen mention of using z-index to bring some of the smaller areas to the fore. I don’t think it’s needed - what I’ve done here is shuffled the <li>s around - the later ones seem to have the equivalent of the highest z-index.

3- I’ve added title=“Shetland” etc to the <a >s for alt tags

4- I’ve used the a {text-indent: -100em;} hack as suggested by Dante-Cubed (there was something useful amongst all the vehemence) so that I can add text links in the <a></a> tags. Hopefully this would give a navigable list if the styles are not used.

The only annoyance for me is that the arithmetic is a pain in the arse. What I want now is someone to design some software to make it easy, in the same way as something like Globalscape’s Cutemap does for normal image maps.

The best reason to use, say, a 500x50 image instead of 10 50x50 images is because for every image, the server sends a bunch of headers to the client before sending the image, and the client pauses to see if the image has been cached or modified since it was last cached, and then it signals the server to continue downloading if it needs the new version.

This is very slow when there are a lot of images. The menu on my website uses 58 images just for the buttons (there are 23 buttons, if I remember right). It takes forever to load the damn thing… but a single image would load much quicker.

Also, everyone knows the problem of image rollovers—you need to pre-cache the rollover image in JavaScript or it won’t be loaded until you move the mouse over it. A sprite map fixes that problem.

Otherwise it was a really great article… it occured to me that something like this would be great but I didn’t think it could be done with CSS.

Hi there,
I’ve found that Safari on OS 10.2.8 has problems with returning to the normal state after the hover. This has something to do with position:relative of the <ul> but I can’t figure out a way to circumvent that.

I can’t work out how to translate this to a vertical list of links, like thus:

link 1
link 2
link 3

...instead of the horizontal way this example is set out. I’ve tried changing the “left: x; width: x” to “top: x; height: x”, and the different offsets, but Safari doesn’t even register there being links there. Doing it horizontally, as demonstrated here, works fine. Thanks in advance!

Hey VW, not managed to get this fully underway myself, but did gather that you can put the image anywhere you like- left, right, top bottom…. it’s all a maths game.

As long as the position attributes for the images in both states correspond with what you want to see in said states, your laughing.

As for the vertical lists, I’m still trying to crack that myself, but I did see one used on http://www.CSSZenGarden.com
Have a little browse through to see if you can spot it (I’ll have another look myself)
(could it be ‘display: inline;’?)

>Hey VW, not managed to get this fully underway myself,
>but did gather that you can put the image anywhere you
>like- left, right, top bottom…. it’s all a maths game.

Aye, that’s what I figured, but I can’t work it out. Instead of having “left” and “width”, you’d think you’d have “top” and “height”, but it doesn’t work. I end up with the entire navigation image being linked as the bottom (contact) link, and the whole lot mouseovers at once…

Great article am experimenting with this right now but am having problems centering the list. I have gone to many resources and use the text-align:center trick for IE and the margin:0px auto for all others. In all other browsers except IE the list is centered.
But in IE it is always about 30 picels off to the right forcing the user to scroll in 800x600 resolutions

I am trying to learn as much as possible about CSS. I have been using Dreamweaver & Fireworks for about 5 years. I am currebnlty converting our website to all CSS. However, althoguh I keep hearing about “sprites” I have no idea what they are. It appears to be some kind of image. Could you please clarify so I can understand what you are doing. I find that those who are familier with a technology often forget that those who are still learning may not yet know all the jargon, much of which is not in the reference books.

I really like this idea…however I wanted to see if it really degraded to an unordered list in Netscape 4.7 (mac). It doesn’t.

Now, I don’t intend on caring too much about this browser, but I’ve been reading Zeldman’s book and this website and have loved them both simply because they present new techniques that can transcend all the difficulties I’ve been experiencing.

How come the sprite technique doesn’t just show up as an unordered list for me in NS4.7 Mac?

Always looking for new ways in which to implement CSS and this certainly is a good one. I’ve already played about with it and found it quite easy and it seems to be an extremely good way to present things.
Wonderful tutorial, many thanks.

Hello, studying your great tutorial and trying to get to the same results I have some big problems with this button-thing. Even with a exactly same picture and your css-code (!) I don’t get to the same result… How do you count the values for the image itself and the borders and how do you get this image in the middle of the page without coding it???
I’m willing to learn but now I need a litte or more help. Thanks a lot!

Hello, in the meantime paul o’brien from sitepoint helped me with my centering-problem. Shorthand-coding is not my speciality… (margin top and bottom with px and right/left with “auto”).
The rest of the story I solved with a little help from my partner who askes the right questions. But I still don’t understand why you used the dummy-background-image for the ul - that makes no sense to me. Also the 1px add to the width of the picture/ul I see but don’t understand.
So if you, dave, or somebody else could explain me, I would appriciate!
Susanne