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.
Damn, doesn’t seem to work fully in Mozilla 1.6 on XP. (I used 1.5 before.) The two examples, one with “borders turned on”, do nothing. Yet the final “So there you have it” version does work!
I’ve done something alike with javascript mouse-overs and not slicing the images up, but I never seen it done with CSS before.
Eric Meyer’s famous spiralling shelve demo springs to mind, but this one actually works in IE!
One mayor plus using larger images is that once the two images are loaded, the caching of the images make the rollovers fast, while pages with a lot of sliced up images tend to have a small delay.
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 think it can be done, it just wouldn’t end up fixed-position.”
Wouldn’t you just use the combination of these two rules:
background-attachment: fixed;
and
background-position: -10px -20px; (example values)
Copy & paste the code below to embed this comment.
Derek Pennycuff
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.
(Not sure why I’m taking the bait…)
Anyway, great useful article Dave. Most of us appreciate it.
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.
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.
Wonderful technique. I had come up with a layout that was going to need something like this just a couple of days ago – Perfect timing!
To Dante-Cubed:
If you’re so concerned with the “serious questions”, and you can’t keep from reading ALA, why don’t YOU write an article about what you think is important?
Complaining does nothing more than irritate the rest of us. As a previous commenter said – “If you don’t like it, why are you here?”
Copy & paste the code below to embed this comment.
Subrisi
…but since no-one has suggested it, what the hell. Could one large image file be used to replace all the seperate images for a page and lead to quicker loading?
David Shea, you’ve done a heck of a lot to legitimize CSS for graphic designers and given me a ton of inspiration. You are just plain awesome. I can’t wait to test out this method.
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…
rgw—What can I say? Thank you! (and thank you everyone else providing useful feedback.)
Copy & paste the code below to embed this comment.
Peterman
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.
Copy & paste the code below to embed this comment.
magnus
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.”
There are so many CSS-relatd sites I wish I had time to read… Still, ALA and Mezzo do sit on top of the list, and this kind of article makes the “why” of that obvious.
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
Thanks for posting that article! It’s pure genius!
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/
[removed]
//Powered by DCScript
function zebra() {
var node = document.getElementById(“zebra”);
var tds = node.firstChild.firstChild.childNodes;
for (var i=0;i<tds.length;i+=2) {
var inc = eval(i+1);
tds.style.backgroundColor=“blue”;
tds[inc].style.backgroundColor=“green”;
}
}
window.
[removed]
Change the ID and the colors (or the onload bit). Correct me if this script is wrong. This was my initial thought has to how to create Zebra Tables. The firstChild.firstChild bit is for the TBODY tag (which is automatically generated by IE6).
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
Copy & paste the code below to embed this comment.
tik
I really like the clean usefulness of this idea but I as well as several other designers use repeating backgrounds will this work with images that require patterning?
Copy & paste the code below to embed this comment.
Yannick Schall
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 ?
Copy & paste the code below to embed this comment.
Andy Moss
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.
Copy & paste the code below to embed this comment.
magnus
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!
Copy & paste the code below to embed this comment.
Ray Miller
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 coded a few sites for some graphic designers, and I usually always have to slice up the navigation, as they are irregular shapes and have completely different backgrounds.
An example is http://yayforgecko.net/k8/ where I used the sprites to work with the backgrounds.
A potential problem is the IE5/Win position: relative bug
http://www.quirksmode.org/css/ie5win_relative.html
Make sure you always use a height when using this technique!
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.
I love this CSS stuff. Everytime I use it I’m filled with on overwhelming feeling of “doing it elegantly” instead of kludging it horribly. And this is one of the most elegant uses I’ve seen yet.
First time I’ve found this website… brilliant… I shall definitely be exploring it further.
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).
Copy & paste the code below to embed this comment.
Tim
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?
Copy & paste the code below to embed this comment.
Scott
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.
Copy & paste the code below to embed this comment.
Mark
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.
Copy & paste the code below to embed this comment.
Richard Perry
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.
Copy & paste the code below to embed this comment.
paperwings
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 will stop trolling here if you stop on my site… Just because I might troll here is no excuse for you to do the same”
So you admit to trolling. Sigh…
If people are trolling your site, they’ve as much right as you have to troll here. But remember the ALA text at the top of this page: “We reserve the right to delete flames, trolls, and wood nymphs.”
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)
Copy & paste the code below to embed this comment.
Mirek
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.
Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.
edit: Without having to embed a span inside the anchor.
Copy & paste the code below to embed this comment.
Peterman
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
Copy & paste the code below to embed this comment.
Ray McKenzie
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.
“Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.
edit: Without having to embed a span inside the anchor.”
As posted here earlier for review:
http://icant.co.uk/buttons.html
has exactly that.
We should stop wasting time on useless discussions if lists or menus are correct and stick to the topic at hand.
Although <menu> may be used, despite being deprecated, I try to follow the advice of the W3C myself. At the base of the page I linked to earlier, they say:
“We strongly recommend using UL instead of these elements.”
Copy & paste the code below to embed this comment.
yannick schall
hi there again, a few days ago i posted here about this technique.
if i put the code in a linked css it’s not showing anymore the picture.
i could not find out why.
now i’m almost finish with my first complete css designed web site, but a lot of adjustment for browsers compatibility.
and just about ths technique, it’s working well almost everywhere but bug comletely on opera mac ( the latest version )
is ther a work around ?
could somebody tell me as well if they are good places where show your web sites to get some help debugging. i start going crazy…
Copy & paste the code below to embed this comment.
Peterman
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.
I didn’t mean my above post in a bad way. What I meant was that Evolt always has stuff that you won’t find anywhere else, or stuff that might not make much sense. I do have a right to criticize.
I contribute a lot. If you look at the Zebra Tables comments you’ll see just that.
Whining? I have a few responses to that but that belongs in email, as I said earlier.
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.)
I’ve used the methods described to make the following page:
http://test.irregular.ch/hover.html
I had to use z-index several times so that the tiny pieces can be selected too
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 :)
Used your technique to change this site’s Navigation from damn old JavaScript and 16 GIF-Files to some lines of slim CSS-Code and ONEGIF-File. I love it!
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?
Copy & paste the code below to embed this comment.
Isabella
<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>
Copy & paste the code below to embed this comment.
Dan
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.
Firstly, excellent article – I hadn’t thought of doing things this way.
Here’s my attempt, which uses the initial idea along with a number of bits of advice which have been mentioned in this discussion.
http://www.plexusmedia.co.uk/rollovermap.html
The graphic used is
http://www.plexusmedia.co.uk/images/hovermap.gif
Browsers tested on
PC – IE6, Firefox
Mac – IE5, Safari 1.2, Firefox .08
Lessons I’ve learnt in this are:-
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 500×50 image instead of 10 50×50 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.
Copy & paste the code below to embed this comment.
Axl
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’ll say from the outset that I’m not especially good with CSS. ;)
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!
Yo. Anyway know the css code, for changing the state of an image defined by a CSS class, to have a border shown when the user places the mouse over the image?
Yo. Anyway know the css code, for changing the state of an image defined by a CSS class, to have a border shown when the user places the mouse over the image?
This article is amazing, the writing of the tutorial is also outstanding. I had it working in a complex layout in no time. The code is rock solid, very stable.
Thanks Dave for taking the time to document this incredible technique!
I’ve only been doing full CSS-based design for a few weeks, but I’m loving it!
There’s a submission for CSSZenGarden from me in Dave’s inbox (we can but try!) and my menus are going to look fantastic now that we’ve been let in on that little gem!
PLEASE keep up the hard work everyone- it’s our future!
(and Dave, accept my submission… I’m sure I can find out where you live…) lol
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;’?)
And what do you know,,, it was on this site! (well durr!)
http://www.alistapart.com/articles/practicalcss/ when it loads run your search function (usually ‘ctrl’+‘f’ [find]) to locate the words ‘Checking it Twice…’
It’s right there.
(Normally, a nice touch with css is that if an element has an ‘id’ attribute, you can use it as an anchor to that direct part of the page. That page just didn’t seem to have any!)
Further reading on that point… http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2.3
‘…because the W3C aren’t f***ing about…’ (quote:Me, just now.)
I’m off to bed, but no doubt CSS won’t let me sleep AGAIN.
>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…
And setting it to inline instead of block doesn’t work either. :(
Copy & paste the code below to embed this comment.
Coog
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 800×600 resolutions
Anyone have any good links or solutions to centering this list?
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.
Copy & paste the code below to embed this comment.
Barclaycard
Sie sind auf der Such nach einer Kreditkarte oder suchen ein geeignetes Zahlungsmittel für den Urlaub. Mit einer Kreditkarte (englisch: credit cart) haben sie genau das richtige gefunden. Wir bieten ihnen eine Barclaycard an, diese kombiniert Mastercard und Visa in einer Karte. Wollen sie hingegen Urlaub machen und abnehmen ist Fastenwandern genau das richtige für sie. Fasten und wandern sie, Fastenwandern in den Vogesen ist gesund und macht spass. Bücher, DVDs, kann man online einkaufen, dort gibts alles günstig auch Software ohne Versandkosten. Besuchen sie Bücher, DVDs günstig kaufsonline machts möglich.
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?
Copy & paste the code below to embed this comment.
Avis
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
184 Reader Comments
Back to the ArticleChris Vincent
I’ve seen Pixy’s hover technique, and I’ve built a couple sprite engines in my lifetime. I don’t know why this didn’t occur to me. Very cool.
I can imagine several uses for this other than hover effects… I’ll try a few things and see what I come up with.
Luke Redpath
Along with Doug Bowman’s sliding doors article, easily the best thing I’ve read on here since the relaunch. I look forwards to your next article.
I definately plan to use this on the new lastfield site to replace the highlighting UK map we use on our contact page.
Luke Redpath
For Jason. M…
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?
azw
I’m surprised that things don’t fall apart when you mouse over a place where two boxes overlap!
Any idea why this works? Could it be that if it’s not clear which box you want, the browser simply does nothing?
Very nice!
Dave S.
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 Hester
Damn, doesn’t seem to work fully in Mozilla 1.6 on XP. (I used 1.5 before.) The two examples, one with “borders turned on”, do nothing. Yet the final “So there you have it” version does work!
Same result in Firefox 0.8.
Martijn ten Napel
I’ve done something alike with javascript mouse-overs and not slicing the images up, but I never seen it done with CSS before.
Eric Meyer’s famous spiralling shelve demo springs to mind, but this one actually works in IE!
One mayor plus using larger images is that once the two images are loaded, the caching of the images make the rollovers fast, while pages with a lot of sliced up images tend to have a small delay.
Dave S.
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.
Matt Irwin
I’ll just add to the compliments, I really like your code, its very clean and elegant and it degrades nicely.
Bravo!
Simon Meskens
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 think it can be done, it just wouldn’t end up fixed-position.”
Wouldn’t you just use the combination of these two rules:
background-attachment: fixed;
and
background-position: -10px -20px; (example values)
Derek Pennycuff
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.
Dante-Cubed
It’s the usual:
ALA avoiding the serious questions for stuff like this.
I don’t really care anyway.
Matthew Magain
…then why are you here?
Great article Dave.
jim
Anyways, blobs! Awesome article, it’s always the simplest things we stumble across which end up being the most useful.
ephi
really, this article just amazes me how with some little ideas you can make them more applicable in various ways.
Ryan
I have been using this method for my nav links for a while and it works wonderfully.
I never thought of using it for irregular shapes in that manner.
Great work!
I always love to have a great place to point questions on this subject too.
Dante-Cubed
Why does everyone use LIs when they are not neccessary? It’s extra markup for no reason!
hartless
as each image must be verified before download. Could save quite a bit of time for many icons or images.
Tony
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.
(Not sure why I’m taking the bait…)
Anyway, great useful article Dave. Most of us appreciate it.
robin
Excelent job! I’m everytime surprised what you can do with CSS.
Keep it coming…
David House
Very nice indeed.
Terry
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.
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.
Twyst
To Dave:
Wonderful technique. I had come up with a layout that was going to need something like this just a couple of days ago – Perfect timing!
To Dante-Cubed:
If you’re so concerned with the “serious questions”, and you can’t keep from reading ALA, why don’t YOU write an article about what you think is important?
Complaining does nothing more than irritate the rest of us. As a previous commenter said – “If you don’t like it, why are you here?”
Rather than complain, contribute.
Jonas Sveningsson
…is filled with lists. Go figure!
Subrisi
…but since no-one has suggested it, what the hell. Could one large image file be used to replace all the seperate images for a page and lead to quicker loading?
rgw
David Shea, you’ve done a heck of a lot to legitimize CSS for graphic designers and given me a ton of inspiration. You are just plain awesome. I can’t wait to test out this method.
Dante-Cubed
Yeah. 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.
“you need a new hobby”
What is that supposed to mean? I have far too many: Musician, writer, historian, web developer.
I tried contributing. Didn’t work. ALA would never publish me. That’s why I stick to what I’m good at: San Francisco History.
Dave S.
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…
rgw—What can I say? Thank you! (and thank you everyone else providing useful feedback.)
rgw
http://rick.renegadeonline.net/ – first attempt w/ method
first impression: me-likey this sprite-cutting technique.
Jon
Image maps are really neat. Maybe I’m just a newbie to CSS, but why is the background set to transparent? Thanks!
Peterman
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”. ;)
Lyle Konkiel
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.
magnus
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.”
a {
text-decoration: none;
}
should fix that.
Christophe Porteneuve
Dave, you just plain rock.
There are so many CSS-relatd sites I wish I had time to read… Still, ALA and Mezzo do sit on top of the list, and this kind of article makes the “why” of that obvious.
Brilliant.
setmajer
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
Dante Evans
I know. I would have used display: list-item, but IE 5x doesn’t support it, and it was just as complicated. I decided not to bother, and used lists.
TheGoblin
Thanks for posting that article! It’s pure genius!
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/
Again, this article is excellent!
Marko
… in IE 6.0? Anyone have a suggestion?
Otherwise very good article, Dave!
Dante Evans
[removed]
//Powered by DCScript
function zebra() {
var node = document.getElementById(“zebra”);
var tds = node.firstChild.firstChild.childNodes;
for (var i=0;i<tds.length;i+=2) {
var inc = eval(i+1);
tds.style.backgroundColor=“blue”;
tds[inc].style.backgroundColor=“green”;
}
}
window.
[removed]
Change the ID and the colors (or the onload bit). Correct me if this script is wrong. This was my initial thought has to how to create Zebra Tables. The firstChild.firstChild bit is for the TBODY tag (which is automatically generated by IE6).
Ali Farahani
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 :).
Dante-Cubed
Why don’t you just marry CSS, Dave Shea or A List Apart?
Just kidding. Dave has done a lot of stuff with CSS. He’s done as much with CSS as PPK has with Javascript and the DOM.
sal
Great lesson! I’m blown away by the innovation. Just when I thought CSS did just about everything, too!
Chris Hester
I think the previous comment (http://www.alistapart.com/discuss/sprites/6/#c7039) is in the wrong thread. No zebra tables here!
Dante-Cubed: lists are used because they degrade gracefully. If the user turns off CSS, they get a nice HTML list instead.
Chris Hester
Ali Farahani – look at the layouts here:
http://positioniseverything.net
I also have a layout demo on my site which uses borders to create columns of equal height:
http://www.designdetector.com/articles/cssdemo1.php
Chris
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
tik
I really like the clean usefulness of this idea but I as well as several other designers use repeating backgrounds will this work with images that require patterning?
Yannick Schall
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 ?
Andy Moss
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.
Phunky
Ive used a similar was of doing this for a long time, to make my links Very SE friendly and to also reduce the amount of JavaScript used on a site…
Well done dave on getting this method out into the open :) summat i kept saying i would do but just never got round to doing so…
If you would like to view my little way goto www.phunky.co.uk/2004/
Michael
Does PPK know about Dante’s love for him? Should we tell him?
magnus
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!
What’s best to use? CSS or Javascript?
magnus
Wasn’t finished writing, dumdumb me :P
The CSS is starting to grow well over 150 lines, only for this page: http://www.urbanturban.no/index.html (The new page is not uploaded yet).
Is it better now, to do as it is done on the old page, use JS to show the “info images” on hover, or go with css?
Travis
I have been playing around with this idea today but with no success. Is it possible to use this method to replace the image used to submit a form?
Ryan
Wonderfully creative! With CSS level 3 around the corner who knows what the ALA crew will think up next?
Dante-Cubed
I really shouldn’t post stuff when I’m tired. I make silly mistakes like mispeling wurds.
Dante-Cubed
And I’m the one being called immature.
I agree with a lot of what PPK says. He’s seems to think (in some ways) like me. I don’t love him. I don’t agree with everything he says.
Ray Miller
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.
Radley Smith
I’ve coded a few sites for some graphic designers, and I usually always have to slice up the navigation, as they are irregular shapes and have completely different backgrounds.
An example is http://yayforgecko.net/k8/ where I used the sprites to work with the backgrounds.
A potential problem is the IE5/Win position: relative bug
http://www.quirksmode.org/css/ie5win_relative.html
Make sure you always use a height when using this technique!
paul
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.
http://230.ca/spritestext/
Rob
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).
Keep writing this stuff; this is why I read ALA
jim
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.
Steve
Well… thats about it really – Superb!
I love this CSS stuff. Everytime I use it I’m filled with on overwhelming feeling of “doing it elegantly” instead of kludging it horribly. And this is one of the most elegant uses I’ve seen yet.
First time I’ve found this website… brilliant… I shall definitely be exploring it further.
Janos horvath
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.
matt
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).
Ray McKenzie
Brilliant article Dave. Also…just read the D-W interview. Puts me in mind of applying this technique to a Zen-Garden project ; )
Dante…your a troll. You must not have been breast-feed as a child. Ya poor bastard.
http://www.alistapart.com/discuss/sprites/4/#c6994
Martijn ten Napel
http://www.alistapart.com/discuss/sprites/8/#c7071
Paul,
The height box model hack can be avoided by setting the line-height equal to the height and avoid padding at the top or bottom.
Tim
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?
Scott
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.
Marko
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.
Sam Ingle
Janos, I believe there is something wrong with your settings, I viewed both your link and Dave’s, and neither of them had any delay in IE 6.
Dante-Cubed
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.
Thank you.
Mark
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.
Richard Perry
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.
Janos horvath
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/
Scott Hamm
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.
paperwings
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.
Chris Hester
“I will stop trolling here if you stop on my site… Just because I might troll here is no excuse for you to do the same”
So you admit to trolling. Sigh…
If people are trolling your site, they’ve as much right as you have to troll here. But remember the ALA text at the top of this page: “We reserve the right to delete flames, trolls, and wood nymphs.”
Bye.
Susanna King
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.
Sunny
Nice Work Dave!!
And the CSS has given me a completely new set of ideas to play around with.
Thanks and lot fo sharing it.
Chris
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?
Jamie Mackay
Just read this great article and ran away and tried out an idea it gave me for transposing manuscript text with typed text – check it out:
http://www.mch.govt.nz/mch-only/olde-text.html
very rough and ready, but only took me about 15 minutes and would be easy enough to tidy up.
I can see whole new worlds opening up, thanks!
Dante-Cubed
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.
Chris
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.)
ololol
Won’t this bloat the data? Instead of having lots of small files to be loaded, a big one has to be loaded hundreds of times.
Jamie Mackay
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
Chris Fam
Very nice effect! but has anyone successfully tweaked it so that images can be printed out?
Chris
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.
Chris
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)
Mirek
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
Dante-Cubed
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.
rgw
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.
rgw
Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.
edit: Without having to embed a span inside the anchor.
Peterman
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.
Ramon Tapales
Well conceived and beautifully written Dave! Here’s a short FIR-based modification for Opera 6.
Change the background position for the
ulelement to reveal thehoverimage instead:#skyline { width: 400px; height: 200px; background: url(test-3.jpg) 0 -200px no-repeat; margin: 10px auto; padding: 0; position: relative; }
Adjust the widths of the list elements to add up to the full 400px width of the
ulelement:#panel1b { left: 0; width: 96px; }
#panel2b { left: 96px; width: 76px;/*formerly 75px*/ }
#panel3b { left: 172px; width: 111px;/*formerly 110px*/ }
#panel4b { left: 283px; width: 117px; }
Finally, add these background postions for each list id tag‘s
aelement:#panel1b a { background: transparent url(test-3.jpg) 0 0 no-repeat; }
#panel2b a { background: transparent url(test-3.jpg) -96px 0px no-repeat; }
#panel3b a { background: transparent url(test-3.jpg) -172px 0px no-repeat; }
#panel4b a { background: transparent url(test-3.jpg) -283px 0 no-repeat; }
That‘s it. Hope somebody finds this helpful.
Janos horvath
A Text replace version for images off, css on mode.
And a possible solution for printable version with CSS content property. (Only works with Opera7)
http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/
I have created a DHTML behavior to reduce flicker in IE, fortunately that is good for printable version too…)
Dante-Cubed
>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
Next
</menu>
You make the call.
Chris Hester
Menu is deprecated. Never seen it used myself.
http://www.w3.org/TR/html4/struct/lists.html#edef-MENU
Dante-Cubed
…Menu is deprecated but still works. Just because something is “deprecated” doesn’t mean you shouldn’t use it. It should make a comeback.
Dante-Cubed
“HTML Lists degrade wonderfully”
Not in NN4.x. Nothing happens at all, and all you see is part of the image.
M
If you check the definition of the word deprecated
http://dictionary.reference.com/search?q=deprecated
I think you will see that it in fact does mean just that.
Ray McKenzie
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.
Chris
“Though personally I’d like to see a way to keep the text in the anchor, it is still technically correct code.
edit: Without having to embed a span inside the anchor.”
As posted here earlier for review:
http://icant.co.uk/buttons.html
has exactly that.
We should stop wasting time on useless discussions if lists or menus are correct and stick to the topic at hand.
/me puts the lid on the box with trollnip
Chris
Although <menu> may be used, despite being deprecated, I try to follow the advice of the W3C myself. At the base of the page I linked to earlier, they say:
“We strongly recommend using UL instead of these elements.”
yannick schall
hi there again, a few days ago i posted here about this technique.
if i put the code in a linked css it’s not showing anymore the picture.
i could not find out why.
now i’m almost finish with my first complete css designed web site, but a lot of adjustment for browsers compatibility.
and just about ths technique, it’s working well almost everywhere but bug comletely on opera mac ( the latest version )
is ther a work around ?
could somebody tell me as well if they are good places where show your web sites to get some help debugging. i start going crazy…
Peterman
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.
Dante-Cubed
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>
Dante-Cubed
http://www.quirksmode.org
For all your browser quirks
Ben
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.
Dante-Cubed
Use this:
A {
text-indent: -100em;
}
I believe this is called the Leahy-Landridge hack.
Browser
For those of us not skilled at visualizing code and too lazy to type it in, a link to an example would be helpful.
…Browser
Dante-Cubed
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.
Tom Sunshine
Not just a major step forward but a beatifully written piece as well. Thanks so much for the goft of pleasure in addition to the knowledge!
Michelle D'souza
That was a great article, didn’t really know that you could do that with CSS.
Chris Hester
Hey Dante-Cubed! Now someone wants to make a whole site using nothing but lists!
http://www.burned.com/absolutelists.php
Inspired by Tantek Celik no less.
Dante
I saw that. I’d expect to see that ludicrisy on Evolt.
Chris
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.
Dante-Cubed
I didn’t mean my above post in a bad way. What I meant was that Evolt always has stuff that you won’t find anywhere else, or stuff that might not make much sense. I do have a right to criticize.
I contribute a lot. If you look at the Zebra Tables comments you’ll see just that.
Whining? I have a few responses to that but that belongs in email, as I said earlier.
Dante-Cubed
..Two sentences is not a rant.
Did you write EasyCMS, Chris? It’s pretty cool.
Chris
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.)
http://stunicholls.myby.co.uk/menu/alice.html
mk
I’ve used the methods described to make the following page:
http://test.irregular.ch/hover.html
I had to use z-index several times so that the tiny pieces can be selected too
Tony
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 :)
Gerrit van Aaken
Used your technique to change this site’s Navigation from damn old JavaScript and 16 GIF-Files to some lines of slim CSS-Code and ONE GIF-File. I love it!
Gerrit van Aaken
http://www.scherenburgfestspiele.de/html2004/index.html
Dante-Cubed
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.
Dakkon
So, has anyone found a nice way to not only fix the flicker, but get past IE having to download the image every time?
I was really hot about this idea until I noticed that IE 6 completely ruins it. It makes fast hovers impossible, yet again.
I’ve heard the discussion about using fir, but I have yet to see an example targetted at rollovers using this method.
Anyone figured it out yet?
/dak
Pete F.
Excellent work, Mr. Shea, and thanks for sharing.
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;
<body>
<h1 class=“alt”>My Website Name</h1>
A brief welcome message.
<ul id=“site-navigation”>
<li>
<h2><span class=“alt”>Section 1</span>
Section description and overview.
</li>
<li>
<h2><span class=“alt”>Section 2</span>
Section description and overview.
</li>
<li>
<h2><span class=“alt”>Section 3</span>
Section description and overview.
</li>
[Etc…]
</ul>
<div id=“main-content>
[Blah blah blah…]
</div>
</body>
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?
Rich1Million
Ever trying to maximise CSS, this article was just what I was looking for. Simple but really effective.
I went and changed a rollover navbar immediately and was very pleased with the results.
Thanks!
Isabella
<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>
Dan
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.
Justin
This is gonna save me a lot of time on some upcoming sites.
I’m very impressed at the ingenuity shown here. Well done!
Adept
It’s so cool!
Garve
Firstly, excellent article – I hadn’t thought of doing things this way.
Here’s my attempt, which uses the initial idea along with a number of bits of advice which have been mentioned in this discussion.
http://www.plexusmedia.co.uk/rollovermap.html
The graphic used is
http://www.plexusmedia.co.uk/images/hovermap.gif
Browsers tested on
PC – IE6, Firefox
Mac – IE5, Safari 1.2, Firefox .08
Lessons I’ve learnt in this are:-
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.
cheers
Garve
Garve
Comment from the sliding doors article:-
“Switching IE to not check the page for newer content every time removed the image flicker problem.”
Should apply here too I would think.
Ed Resnick
The best reason to use, say, a 500×50 image instead of 10 50×50 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.
mediatiek
how can we make it work
Matias
I Cant get to work a vertical menu with this method. someone can help me?
thank you
MAt
PNDesign
Thanks for this nice article!
Axl
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.
Does someone maybe have a fix for?
Anyway, the article is great.
Roberto
Chris Fam’s comment from March 12th,
“has anyone successfully tweaked it so that images can be printed out?”
is a major issue that, amazingly, no one has addressed. Without a work-around for this I wouldn’t recommend using this method.
Is there a solution to this problem?
Janos horvath
I have already post my ideas:
http://www.hszk.bme.hu/~hj130/css/list_menu/meh_menu/
But no comments arrived :(
To print the image use CSS content property. But create image content is only supported in Opera7.
(This can be the solution in the future.)
For IE use a DHTML behavior that adds a layer with the image under the link. When the background-image is not visible thhis image will show up.
Dante-Cubed
Yeah it sucks CSS3 content is only supported by “Opera 7”
AJ
Do the browsers load the background-images when they find them in the css-code? Otherwise it would cause the rollover to lag.
Dave S.
For those noticing Internet Explorer flickers, please head over to my site and read the latter half of this post:
http://www.mezzoblue.com/archives/2004/04/08/ie_vs_image_/
IE is acting in error and hitting up the server when it shouldn’t; a few lines in your .htaccess file will fix this right up.
VirtualWolf
I’ll say from the outset that I’m not especially good with CSS. ;)
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!
Alan Kay
Yo. Anyway know the css code, for changing the state of an image defined by a CSS class, to have a border shown when the user places the mouse over the image?
Alan Kay
Yo. Anyway know the css code, for changing the state of an image defined by a CSS class, to have a border shown when the user places the mouse over the image?
Mike Palmer
This guy has done it with a vertical list of links, but they’re not in a list … just stacked anchors.
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html
The tute:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
Gabriel Naranjo
This article is amazing, the writing of the tutorial is also outstanding. I had it working in a complex layout in no time. The code is rock solid, very stable.
Thanks Dave for taking the time to document this incredible technique!
Coos
Fantastic!
I’ve only been doing full CSS-based design for a few weeks, but I’m loving it!
There’s a submission for CSSZenGarden from me in Dave’s inbox (we can but try!) and my menus are going to look fantastic now that we’ve been let in on that little gem!
PLEASE keep up the hard work everyone- it’s our future!
(and Dave, accept my submission… I’m sure I can find out where you live…) lol
(I’m REALLY just kidding. really.)
:D
Coos
VirtualWolf
I just cannot get my head around translating this to a vertical list. :( Thanks for the link, Mike, but that’s not quite what I’m looking for.
Can someone have a look at http://www.virtualwolf.org/new/ and tell me where I’m going wrong?
Many thanks!
VirtualWolf
Oh yes, and would it be better to have the rollover side of the image to the right of the normal one, or below it?
Coos
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;’?)
All the best ;)
Coos
And what do you know,,, it was on this site! (well durr!)
http://www.alistapart.com/articles/practicalcss/ when it loads run your search function (usually ‘ctrl’+‘f’ [find]) to locate the words ‘Checking it Twice…’
It’s right there.
(Normally, a nice touch with css is that if an element has an ‘id’ attribute, you can use it as an anchor to that direct part of the page. That page just didn’t seem to have any!)
Further reading on that point… http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2.3
‘…because the W3C aren’t f***ing about…’ (quote:Me, just now.)
I’m off to bed, but no doubt CSS won’t let me sleep AGAIN.
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
Coos
VirtualWolf
>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…
And setting it to inline instead of block doesn’t work either. :(
Coos
http://www.alistapart.com/articles/taminglists/
I’m working on this one at the moment, but I’m gonna need to turn off http://www.monkeyradio.org to concentrate!
Coog
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 800×600 resolutions
Anyone have any good links or solutions to centering this list?
Christopher Buttery
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.
Barclaycard
Sie sind auf der Such nach einer Kreditkarte oder suchen ein geeignetes Zahlungsmittel für den Urlaub. Mit einer Kreditkarte (englisch: credit cart) haben sie genau das richtige gefunden. Wir bieten ihnen eine Barclaycard an, diese kombiniert Mastercard und Visa in einer Karte. Wollen sie hingegen Urlaub machen und abnehmen ist Fastenwandern genau das richtige für sie. Fasten und wandern sie, Fastenwandern in den Vogesen ist gesund und macht spass. Bücher, DVDs, kann man online einkaufen, dort gibts alles günstig auch Software ohne Versandkosten. Besuchen sie Bücher, DVDs günstig kaufsonline machts möglich.
Ian Tadashi
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?
Avis
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.
Susanne
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!
Susanne
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
mark
Once again you guys really make me feel like an amateur.
Just when i thought i had a handle on it….