csant,
They can be preloaded, just combine the image replacement method of your choice with pixys fast rollovers:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/update.html
Copy & paste the code below to embed this comment.
John Harrold
I have noticed with the rollover technique that if the rollovers contain text – as many do – then if the browser user changes text size, other parts of the graphic show through!
On to the article: Got to say I like it, particularly the easier maintenance when changes inevitable come.
I thought the whole idea of accessible design was to make the content accessible to anyone, regardless of browser – if you still have netscape, fire it up to see what a mess netscape 4.x makes of the links. If you’d stuck with maps you wouldn’t have that compatibility problem – this is not an accesibility idea that I’ll be adopting anytime soon.
Copy & paste the code below to embed this comment.
Alex Cook
Wow there’s a lot of hate on this forum… Great article on the technique used for the specific project. Will it work for EVERY design? No, nor was it ever said it would. However it does meet the needs of the project which is the first rule any designer should prescribe too. It allows for text only displays, and it allows for a freedom of design most CSS layouts wouldn’t. Good work S. Looking forward to the horror site in fact. :)
Sorry, I was a bit blunt… but I just don’t see how this is accessible design when you exclude in the code more people than the few extra who you include.
I just got back into town, and it’s great to see so much discussion already!
Keeping a page’s content and style seperate make it a useful technique – for me, anyway. On the other site I’m developing ( http://www.pvcomics.com/ launching Jan 5) I’m using a style-sheet switcher to serve high bandwidth users with a graphical CSS Image Map, and low bandwidth users with a regular HTML links.
As other people have mentioned, it’s not going to be the right technique for everyone, or every project… but hopefully some people will find it helpful.
I do not agree with the critique of image maps. They are easy to create, they have the necessary accessibility features, they work well in modern and not-so-modern web browsers and is part of the markup languages recommended by the W3C.
This CSS-based technique is complicated and by using it one, without gaining a higher degree of accessibility, simplicity or flexibility, sacrifices backward compatibility.
The ability to hide the large image with a style switcher could be applied to regular image maps as well with display:none
it leaves some things to be desired concerning accessibility. If I browse to the end result site in Netscape 4, I can’t click anything: the link doesn’t work somehow. Only when I read the source and see that a link should redirect my browsing to index2.html do I know where to go.
I’d have to say it’s an excellent article otherwise.
Copy & paste the code below to embed this comment.
Michael R. Havard
Just like other techniques this is just one aspect of a total solution. Combine it with style sheet hiding, css no preload techniques, and a good underlying HTML foundation and you have a great site solution.
My personal belief on accessibility is that it’s about content. Not every CSS/Scripted design is going to be ultimately accessible. I think the point should be to be able to reuse the content for different designs and provide accessibility, either by designing it into the overall view or by providing a means to access just the content without CSS/Script.
I think that’s where a lot of designers are missing the mark. Yes, try to make the site within the design as accessible as possible, but if you don’t know you can for sure then leave some option to go to a down level high accessibility mode (turn off style sheets and use without scripting).
So maybe if at the top of the page you have “Accessibility Mode Page” before your “Skip Navigation/Skip to Content” link.
Gone should be the days when a designer/content creator would have to create a beautiful page of content and then recreate it for NS4, aural browsers, mobile devices. Yes I know of people who have maintained 5 or 6 different versions of code to cater to different browsers. Additionally some developers would do this in server side code (if else if else if else if else). Silverstream actually suggested to us that it was the only way our HTML output from their product could be cross browser compliant.
I don’t see the need for the <div id=“book”> It seems like #book and #menu can be combined (with the height/width from #menu being converted to padding). This makes it easier for a site to move to or from this type of style … don’t have to add an extra <div> around anything you want to do this with. In addition, “book” seems like a poor ID. If the site design changed, and it became a tombstone image … would the “book” ID still be appropriate? Gotta try to keep the design out of the HTML, those little leaks can be troublesome.
I also agree with Lim Chee Aun on changing it to a <ul> and removing the <i>.
This is somewhat more flexible than image maps because it allows you to change styles without ever touching the HTML.
I make a point of giving all headings and navigational items (among other things) an id attribute no matter what style I plan on applying to them. In many styles you won’t touch them individually, but you just move to a design that does something like this article shows, and the most likely places to be affected already have an ID there.
Also, using the ID on headings is nice for giving links back to specific sections of something, like:
http://foo.com/foo.html#whatisfoo
Copy & paste the code below to embed this comment.
MaDness
I did something like that this week to teach a friend of mine how coll css coud have been but I’ve made it with a slight different touch, using a gif image which was full transparent on its upper part and had the rollover in the lower, just like http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ so no preload is needed, plus I used
text-indent: huge-amount;
overflow: hidden;
white-space: nowrap;
so no extra tag (<i> in this case) is needed
Copy & paste the code below to embed this comment.
Cameron
I honestly can’t see any benifit to this. The image map structure is much easier to read and identify than what was proposed here, which means re-designing it would be difficult, espically if you weren’t the designer who made the site in the first place.
Aditionally, the ammount of extra time required realy does seem like a case of trying to apply the wrong technology to solve a fairly simple and straight forward problem. Which only complicates the matter when a simple non-css yet standards compliant solution already existed.
Copy & paste the code below to embed this comment.
Michael R. Havard
The real benefit is in flexibility. If you have a site that is targetted at a wide variety of users/user agents this would be the way to go. It allows you to maintain one set of content and target specific devices solely through the css.
If you were using an image map in this case you would have to provide a modified version of the content to Mobile devices like the palm and PocketPC due to either image map size/screen size limitations or due to lack of support for image maps.
I think it’s a boon to sites that require the ability to change a sites look and feel quickly. This might be for sites that allow user customization or sites that get repackaged/rebranded for external client usage.
Sites that target IE5/6/Netscape4 Windows/Mac and don’t change their sites look maybe once every few years probably won’t see any gain here. But then those are also the sites likely not to see any benefits in using CSS over HTML and who probably still use tables because “it works in every browser”.
Setting a width/height allows you to create clickable areas of whatever size you require. Display:block would limit you to a clickable area the size of the hidden text.
Copy & paste the code below to embed this comment.
Peterman
Matthew Brown, Pat Collins: I haven’t got Netscape 4 available right now, but I can imagine that it doesn’t look pretty. However, all you need to do to make it work is to hide the CSS from NS4, by setting the media attribute of the stylesheet link tag to a value other than “screen” (the only one NS4 understands). E.g:
Copy & paste the code below to embed this comment.
Matt Machell
The big bonus to this technique is that if you ever want to change the layout, you simply move to a new stylesheet, rather than having to redo the navigation entirely. Ideal for a site that changes its design regularly.
As for NS4, use of the @import attachment of a stylesheet should mean they get an unstyled document.
I’ve been thinking about this one and, while I’m still not convinced, I think the real problem is one of emphasis.
The premise of the article, as written, is “Here’s a way to replace a perfectly serviceable (X)HTML element with a whole heap of CSS”. The only reason give for doing so is that <map> and <area> are “old fashioned”. Call me Mr Retro, but I’m not inclined to pick a less accessible, less reliable approach purely for the sake of fashion.
What it should have said is “Here’s a way of styling a <ul> of menu options as an image map instead of a vertical/horizontal row of links”. Now it makes sense, and it is kinda groovy.
If you have a set of links that only make sense in the context of an image map – say, points/areas on a map in some GIS-based system – I think you’re better off sticking with “old-fashioned” image maps.
If you’re looking for an alternative way to display a menu of links, consider this approach.
I don’t think this method is going to be as flexible as its touted to be. The reason is that if you decide to change the background to a different one, you still have to go back and redo the positioning of the <a> tags.
Its true that the change needs to be made in just a single CSS file than all HTML files. But usually one puts (or should put) the imagemap at the top or the bottom of the HTML. Thus a simple search and replace for all HTML files will work very well.
Image maps, when appropriately done, are no less accessible. Especially, given the fact that you need to hide the CSS from NS 4.7, isn’t the image map method more accessible?
Another point, I believe, is that image maps are going to make understanding of the design more intuitive. Separation of content and design is great… as long as it maintains the simplicity of the code.
Copy & paste the code below to embed this comment.
Peterman
“given the fact that you need to hide the CSS from NS 4.7, isn’t the image map method more accessible?”
I’m not going to debate image maps versus this method, but I can’t imagine even a remotely advanced CSS-only layout that you don’t have to hide from NS 4.x.
Copy & paste the code below to embed this comment.
dolphinling
The basic idea is great. CSS can be used to do the exact same thing as image maps.
However, your execution falls apart if I’ve specified my browser to always provide a margin on the page (in mozilla, this is just body{margin:10px !important}. To fix this, the image map should have position:relative specified to take it out of the normal flow and therefore make the positioned elements inside of it render correctly.
Also, someone correct me if I’m wrong, but aren’t absolute positions only allowed to be applied to block elements? Regardless of whether or not it’s true, the a elements should be block anyway, and then have the height and width applied to them to get them sized how you want, since that’s the intended effect and keeping them inline and trying to get them to work that way is harder to do, more likely to render incorrectly for other people, and incorrect usage..
And finally, what’s wrong with visibility:hidden on the a elements themselves? Does that make them unclickable?
Copy & paste the code below to embed this comment.
Larry Israel
A minor request to the editors and future ALA authors. How about embedding the style sheet in the HTML page rather than linking to it. This would make it easier for readers to view the source. Yeah, we can still get to the CSS if it’s linked, but not as quickly, and all the code’s not in one file.
I agree with many other comments: good technique and good article, but there was no reason to bad mouth image maps in the process.
>>>A minor request to the editors and future ALA authors. How about embedding the style sheet in the HTML page rather than linking to it. This would make it easier for readers to view the source. Yeah, we can still get to the CSS if it’s linked, but not as quickly, and all the code’s not in one file.<<<
I hear you: one file is easier to grab and view than multiple files (a markup file and one or more CSS files).
But we encourage our authors to do what Stuart has done here (separate markup from CSS) … and most of our authors do it without prompting.
Here’s why we prefer to do it the way we do it:
1. The markup file is uncluttered; you can see how simple and clean it is. If the CSS were embedded, you’d be looking at a more complicated page and it would be less clear what part of that page to focus on.
2. Separation of presentation from structure is a primary advantage of these techniques, and the examples should reflect it. You could take this XHTML file and give it an alternate style sheet (but you couldn’t do that if the CSS was embedded).
3. Also, although our readership includes some of the most sophisticated and technically savvy web designers around, it also includes people who are new to these techniques. Not all of them know how to link to or import a style sheet … or they may know but not have enough experience to remember how to code the link or the @import directive. The example includes the link and saves these readers the trouble of trying to remember how it’s done.
Copy & paste the code below to embed this comment.
Gabe
Also, it’s quite handy to have CSS in a separate window so you can scroll it independently of the HTML and get a better idea of how it works. I hate having to scroll up and down.
If you use Safari, try the Activity window. It gives a list of all open URLs and components of those pages so you can get to the stylesheet (and anything else) quickly.
I wonder if it would be possible to do several things from here to address several things. One – if the image itself, which in this case is just one big solid image, could be sliced and re-assembled with css?
Two – is it possible to create a server side image map with CSS, building on the above suggestion?
My reasoning for both of the above is to save bandwidth, and increase load time, while preserving the option of showing a wonderful UI like that.
Copy & paste the code below to embed this comment.
IeuanJ
If we can’t have embedded stylesheets (which your reason are good enough to suggest to me) then can we please get a link to the css file at least in the tutorials ? Or perhpas display the code inside the examples themselves as text on screen rather than have us grab the source of the page itself.
The logic of having beginners here is sound but also by stripping the css out and not linking it, they might have trouble finding it.
Plus here in work whenever I type the address of a css file into Ie it launches the thing in ruddy InterDev and I don’t have rights to change the lau=nch options.
Copy & paste the code below to embed this comment.
Michael R. Havard
xtort,
I’d assume that you could spit out one large image and use the background-position property to manipulate what portion of the image is seen through the div. It would be a matter of mapping the server side image areas to top/bottom left/right background-position coordinates and setting the div height/width to get the proper look.
I think it would probably be better though to have several small images than one large one, unless you can assume that all your users are on an Intranet or broadband.
Copy & paste the code below to embed this comment.
Tanny O'Haley
At the company I work for Netscape 4 users make up less than two percent of all individual users. That’s out of the millions of users we get every month. I think that the figure is around 10,000 users. We have now taken up the policy that Netscape 4 users no longer have to be supported. In this debate I’m trying to convince everyone that it would be better “gracefully degrade” for Netscape 4 users.
I think this is a nice option for an image map with the few corrections by dolphinling (http://www.alistapart.com/discuss/imagemap/5/#c6037). As others have said, this is not for every application, but it is another option to think about when designing a site. Especially with the rollover effect(sp?).
Copy & paste the code below to embed this comment.
Peterman
“We have now taken up the policy that Netscape 4 users no longer have to be supported. In this debate I’m trying to convince everyone that it would be better “gracefully degrade” for Netscape 4 users.”
Agreed. However, I would say that you still ARE supporting NS 4. As long as all the relevant (or important or mission-critical, or whatever) content and functonality is accessible and usable in NS 4, it is supported. It’s just the presentation that differs.
My point is that one should be careful with the phrase “no need to support NS 4”, because it could be misinterpreted and (especially when it comes from us “standards” people) used as justification for making web sites that are completely unusable in NS 4.
Copy & paste the code below to embed this comment.
LazyJim
That’s all very good, but to be honest, CSS-P not image maps. OK maybe calling it image maps is useful for people that want to carry on in the old ways using the new technologies, whatever.
Now, I was thinking the same as Lim Chee Aun on the <ul> thing.
And using the CSS preloading hover is a good idea too.
Copy & paste the code below to embed this comment.
Charles
I wound up looking at this article hoping for a solution to a problem I have. I am trying to display charts that allow for heavy user interaction. The chart package I use happily provides an easy way to generate an image map. BUT—the effect I want is for the user to see the each chart region highlighted as the mouse hovers over it. Imagine the user is presented with a pie chart and when she hovers over a pie slice the border of slice becomes red instead of black. When the user clicks on the pie slice they get a menu that allows them to manipulate the chart in useful ways (for example change the color of the pie slice or see detail information)
This sounds like it ought to be a simple straightforward task for an image map, but is not. I have tried code such as this:
—————————————code begins————————————
<html>
<body>
<img
usemap=”#mymap”>
<map name=“mymap” id=“mymap”>
<area alt=“1” title=“1” shape=“poly” coords=“60,15,90,15,90,35,60,35”
tabindex=“1”
>
</map>
</body>
</html>
———————————————code ends————————————-
But without success—it does not reliably work.
I think that perhaps the only way I will be able to get the effect I want is to build—on the fly—transparent GIFs that show my desired outlines and use a rollover to display them. This is a pretty heavy weight solution both in terms of server resources and also from a number of images downloaded perspective—but seems to be the only way I am gonna get this effect in a reliable manner.
Any better ideas out there??? Thanks for reading.
Copy & paste the code below to embed this comment.
Michael R. Havard
Charles it sounds as if you need a technology like flash or more likely SVG. Transform your charts into an interactive SVG image which can be scripted to provide the functionality that you want. People would then just need adobe’s svg viewer plugin.
I think there are ways to do it with CSS and HTML but SVG is a more appropriate technology.
I like it too, and it does appear to meet accessibility for those who use screen readers. However, it does not appear to meet accessibility for people with low vision who do not use screen readers. I tried changing the font size in Mozilla using View/Text zoom and it (as expected) has no effect.
So somebody would have to code additional styles in their personal style sheet to navigate this page. (I don’t see any quick setting in Mozilla to ignore the currently active style sheet.)
Copy & paste the code below to embed this comment.
Rachel Maxim
This method strikes me as a good way to create html-only versions of graphic-intensive flash sites. I agree, I’d rather use spans and have my markup a little less clear than use a deprecated tag like <i> – call me a purist but it just seems wrong! Maybe use <a> instead? Cool idea overall though.
Copy & paste the code below to embed this comment.
Charlotte C.
The idea of css was originally that it was less of a hack than html – more elegant, more maintainable. But now we are seeing so many ‘techniques’ in css which are much more complex that the html methods they replace… such as this one. I don’t approve. css pages still don’t render the same in different browsers anymore than html code did. css has not proven to be an advantage, and this article is one more example of that.
Copy & paste the code below to embed this comment.
Jeff N
The approach worked better then a map in our application and also reduced the final size of the code. Thank you for taking time to share your solution !! Some of us appreciate your efforts.
This solution, with the enhancements on the li and preload-stuff, seems very logical and flexible to me. For those who aren’t convinced: Imagine how you can print this page. Just make a print-stylesheet and there you go!
Copy & paste the code below to embed this comment.
Michael Guitton
Please read Danny Goodman’s “Super-Efficient Image Rollovers” [1] featuring a 3-state rollover client-side image map—CSS + JavaScript combo. It works will all W3C DOM-compatible browsers (not tested with Safari though) and web crawlers!
In my summer job I ran accross a similar problem and reached a slightly different solution. Keep in mind though that I was designing only for IE6 (not a project that went to the web) so I was free of many constraints and constrained in many other ways.
I kept the background image just one whole image with the actual lettering (non glowing). I made an invisible link over the lettering (absolutely positioned) that contained a hidden (visibility: hidden;) image (the glowing lettering) that was shown by calling a javascript function when the mouse over rolled over (onmouseover) and hid it when it was rolled out (onmouseout).
Of course this doesn’t rely purely on XHTML and CSS and I didn’t really look into accessiblity and other such issues, but it was definely a lot less code than this technique and seems sound. I am sure with just a little more code this can be made accessible as well.
I really liked this article as it solved a problem for me with Elastic Design (see the “Elastic Design” article else where on this site). I was trying to create an elastic design where the images would scale in proportion to the rest of the text on the page. The problem was the specs required that certain images be clickable via image maps. How do you get an image map to scale when all of the coords are specified in pixels? Answer, you can’t. This method does however!
I’m including my sample code below so I can point out one minor problem I found in IE6. For the longest time, I couldn’t seem to click on the area I had defined except when I was directly over the small border I had made around the link (so I could see it). If I removed the border, I couldn’t click on the link at all! The answer seemed to lie with the background of the link. As soon as I set one, I could click on the area. We use a single transparent GIF in our pages for tracking and other purposes, which made me decide to try using it as a transparent background for the link. This solved the problem. Here’s the code in case any one else wants to review it.
If you use Safari, try the Activity window. It gives a list of all open URLs and components of those pages so you can get to the stylesheet (and anything else) quickly.
This is fantastic! I can’t believe I didn’t already know this. I’ll use this daily.
Copy & paste the code below to embed this comment.
kiji
I have coded a similar imagemap with text and image pop-ups) on www.jumbotours.co.jp/e/index.html but i’m puzzled with IE 6.0 behaviour. The list items are really close together and sometimes another underlying list/link show up through the pop-up. Any ideas?
67 Reader Comments
Back to the ArticleLevin
csant,
They can be preloaded, just combine the image replacement method of your choice with pixys fast rollovers:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/update.html
John Harrold
I have noticed with the rollover technique that if the rollovers contain text – as many do – then if the browser user changes text size, other parts of the graphic show through!
On to the article: Got to say I like it, particularly the easier maintenance when changes inevitable come.
Matthew Brown
I thought the whole idea of accessible design was to make the content accessible to anyone, regardless of browser – if you still have netscape, fire it up to see what a mess netscape 4.x makes of the links. If you’d stuck with maps you wouldn’t have that compatibility problem – this is not an accesibility idea that I’ll be adopting anytime soon.
Alex Cook
Wow there’s a lot of hate on this forum… Great article on the technique used for the specific project. Will it work for EVERY design? No, nor was it ever said it would. However it does meet the needs of the project which is the first rule any designer should prescribe too. It allows for text only displays, and it allows for a freedom of design most CSS layouts wouldn’t. Good work S. Looking forward to the horror site in fact. :)
Matthew Brown
Sorry, I was a bit blunt… but I just don’t see how this is accessible design when you exclude in the code more people than the few extra who you include.
Stuart
I just got back into town, and it’s great to see so much discussion already!
Keeping a page’s content and style seperate make it a useful technique – for me, anyway. On the other site I’m developing ( http://www.pvcomics.com/ launching Jan 5) I’m using a style-sheet switcher to serve high bandwidth users with a graphical CSS Image Map, and low bandwidth users with a regular HTML links.
As other people have mentioned, it’s not going to be the right technique for everyone, or every project… but hopefully some people will find it helpful.
Rune Glerup
I do not agree with the critique of image maps. They are easy to create, they have the necessary accessibility features, they work well in modern and not-so-modern web browsers and is part of the markup languages recommended by the W3C.
This CSS-based technique is complicated and by using it one, without gaining a higher degree of accessibility, simplicity or flexibility, sacrifices backward compatibility.
The ability to hide the large image with a style switcher could be applied to regular image maps as well with display:none
Pat Collins
it leaves some things to be desired concerning accessibility. If I browse to the end result site in Netscape 4, I can’t click anything: the link doesn’t work somehow. Only when I read the source and see that a link should redirect my browsing to index2.html do I know where to go.
I’d have to say it’s an excellent article otherwise.
Michael R. Havard
Just like other techniques this is just one aspect of a total solution. Combine it with style sheet hiding, css no preload techniques, and a good underlying HTML foundation and you have a great site solution.
My personal belief on accessibility is that it’s about content. Not every CSS/Scripted design is going to be ultimately accessible. I think the point should be to be able to reuse the content for different designs and provide accessibility, either by designing it into the overall view or by providing a means to access just the content without CSS/Script.
I think that’s where a lot of designers are missing the mark. Yes, try to make the site within the design as accessible as possible, but if you don’t know you can for sure then leave some option to go to a down level high accessibility mode (turn off style sheets and use without scripting).
So maybe if at the top of the page you have “Accessibility Mode Page” before your “Skip Navigation/Skip to Content” link.
Gone should be the days when a designer/content creator would have to create a beautiful page of content and then recreate it for NS4, aural browsers, mobile devices. Yes I know of people who have maintained 5 or 6 different versions of code to cater to different browsers. Additionally some developers would do this in server side code (if else if else if else if else). Silverstream actually suggested to us that it was the only way our HTML output from their product could be cross browser compliant.
Greg Pfeil
I don’t see the need for the <div id=“book”> It seems like #book and #menu can be combined (with the height/width from #menu being converted to padding). This makes it easier for a site to move to or from this type of style … don’t have to add an extra <div> around anything you want to do this with. In addition, “book” seems like a poor ID. If the site design changed, and it became a tombstone image … would the “book” ID still be appropriate? Gotta try to keep the design out of the HTML, those little leaks can be troublesome.
I also agree with Lim Chee Aun on changing it to a <ul> and removing the <i>.
Greg Pfeil
This is somewhat more flexible than image maps because it allows you to change styles without ever touching the HTML.
I make a point of giving all headings and navigational items (among other things) an id attribute no matter what style I plan on applying to them. In many styles you won’t touch them individually, but you just move to a design that does something like this article shows, and the most likely places to be affected already have an ID there.
Also, using the ID on headings is nice for giving links back to specific sections of something, like:
http://foo.com/foo.html#whatisfoo
MaDness
I did something like that this week to teach a friend of mine how coll css coud have been but I’ve made it with a slight different touch, using a gif image which was full transparent on its upper part and had the rollover in the lower, just like http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ so no preload is needed, plus I used
text-indent: huge-amount;
overflow: hidden;
white-space: nowrap;
so no extra tag (<i> in this case) is needed
these are my two cents.
Cameron
I honestly can’t see any benifit to this. The image map structure is much easier to read and identify than what was proposed here, which means re-designing it would be difficult, espically if you weren’t the designer who made the site in the first place.
Aditionally, the ammount of extra time required realy does seem like a case of trying to apply the wrong technology to solve a fairly simple and straight forward problem. Which only complicates the matter when a simple non-css yet standards compliant solution already existed.
But that’s just my opinion.
Michael R. Havard
The real benefit is in flexibility. If you have a site that is targetted at a wide variety of users/user agents this would be the way to go. It allows you to maintain one set of content and target specific devices solely through the css.
If you were using an image map in this case you would have to provide a modified version of the content to Mobile devices like the palm and PocketPC due to either image map size/screen size limitations or due to lack of support for image maps.
I think it’s a boon to sites that require the ability to change a sites look and feel quickly. This might be for sites that allow user customization or sites that get repackaged/rebranded for external client usage.
Sites that target IE5/6/Netscape4 Windows/Mac and don’t change their sites look maybe once every few years probably won’t see any gain here. But then those are also the sites likely not to see any benefits in using CSS over HTML and who probably still use tables because “it works in every browser”.
dave
Shouldn’t the menu <a>s be display: block;, or am I missing something?
Stuart
Setting a width/height allows you to create clickable areas of whatever size you require. Display:block would limit you to a clickable area the size of the hidden text.
Peterman
Matthew Brown, Pat Collins: I haven’t got Netscape 4 available right now, but I can imagine that it doesn’t look pretty. However, all you need to do to make it work is to hide the CSS from NS4, by setting the media attribute of the stylesheet link tag to a value other than “screen” (the only one NS4 understands). E.g:
<link href=“example.css” rel=“stylesheet” type=“text/css” media=“all” />
or:
<link href=“example.css” rel=“stylesheet” type=“text/css” media=“screen, projection” />
Matt Machell
The big bonus to this technique is that if you ever want to change the layout, you simply move to a new stylesheet, rather than having to redo the navigation entirely. Ideal for a site that changes its design regularly.
As for NS4, use of the @import attachment of a stylesheet should mean they get an unstyled document.
Chris Hunt
I’ve been thinking about this one and, while I’m still not convinced, I think the real problem is one of emphasis.
The premise of the article, as written, is “Here’s a way to replace a perfectly serviceable (X)HTML element with a whole heap of CSS”. The only reason give for doing so is that <map> and <area> are “old fashioned”. Call me Mr Retro, but I’m not inclined to pick a less accessible, less reliable approach purely for the sake of fashion.
What it should have said is “Here’s a way of styling a <ul> of menu options as an image map instead of a vertical/horizontal row of links”. Now it makes sense, and it is kinda groovy.
If you have a set of links that only make sense in the context of an image map – say, points/areas on a map in some GIS-based system – I think you’re better off sticking with “old-fashioned” image maps.
If you’re looking for an alternative way to display a menu of links, consider this approach.
Niket
I don’t think this method is going to be as flexible as its touted to be. The reason is that if you decide to change the background to a different one, you still have to go back and redo the positioning of the <a> tags.
Its true that the change needs to be made in just a single CSS file than all HTML files. But usually one puts (or should put) the imagemap at the top or the bottom of the HTML. Thus a simple search and replace for all HTML files will work very well.
Image maps, when appropriately done, are no less accessible. Especially, given the fact that you need to hide the CSS from NS 4.7, isn’t the image map method more accessible?
Niket
Another point, I believe, is that image maps are going to make understanding of the design more intuitive. Separation of content and design is great… as long as it maintains the simplicity of the code.
Peterman
“given the fact that you need to hide the CSS from NS 4.7, isn’t the image map method more accessible?”
I’m not going to debate image maps versus this method, but I can’t imagine even a remotely advanced CSS-only layout that you don’t have to hide from NS 4.x.
dolphinling
The basic idea is great. CSS can be used to do the exact same thing as image maps.
However, your execution falls apart if I’ve specified my browser to always provide a margin on the page (in mozilla, this is just body{margin:10px !important}. To fix this, the image map should have position:relative specified to take it out of the normal flow and therefore make the positioned elements inside of it render correctly.
Also, someone correct me if I’m wrong, but aren’t absolute positions only allowed to be applied to block elements? Regardless of whether or not it’s true, the a elements should be block anyway, and then have the height and width applied to them to get them sized how you want, since that’s the intended effect and keeping them inline and trying to get them to work that way is harder to do, more likely to render incorrectly for other people, and incorrect usage..
And finally, what’s wrong with visibility:hidden on the a elements themselves? Does that make them unclickable?
Other than those, though, it’s a great idea. :-)
Larry Israel
A minor request to the editors and future ALA authors. How about embedding the style sheet in the HTML page rather than linking to it. This would make it easier for readers to view the source. Yeah, we can still get to the CSS if it’s linked, but not as quickly, and all the code’s not in one file.
I agree with many other comments: good technique and good article, but there was no reason to bad mouth image maps in the process.
apartness
Larry wrote:
>>>A minor request to the editors and future ALA authors. How about embedding the style sheet in the HTML page rather than linking to it. This would make it easier for readers to view the source. Yeah, we can still get to the CSS if it’s linked, but not as quickly, and all the code’s not in one file.<<<
I hear you: one file is easier to grab and view than multiple files (a markup file and one or more CSS files).
But we encourage our authors to do what Stuart has done here (separate markup from CSS) … and most of our authors do it without prompting.
Here’s why we prefer to do it the way we do it:
1. The markup file is uncluttered; you can see how simple and clean it is. If the CSS were embedded, you’d be looking at a more complicated page and it would be less clear what part of that page to focus on.
2. Separation of presentation from structure is a primary advantage of these techniques, and the examples should reflect it. You could take this XHTML file and give it an alternate style sheet (but you couldn’t do that if the CSS was embedded).
3. Also, although our readership includes some of the most sophisticated and technically savvy web designers around, it also includes people who are new to these techniques. Not all of them know how to link to or import a style sheet … or they may know but not have enough experience to remember how to code the link or the @import directive. The example includes the link and saves these readers the trouble of trying to remember how it’s done.
Make sense?
Gabe
Also, it’s quite handy to have CSS in a separate window so you can scroll it independently of the HTML and get a better idea of how it works. I hate having to scroll up and down.
If you use Safari, try the Activity window. It gives a list of all open URLs and components of those pages so you can get to the stylesheet (and anything else) quickly.
xtort
I wonder if it would be possible to do several things from here to address several things. One – if the image itself, which in this case is just one big solid image, could be sliced and re-assembled with css?
Two – is it possible to create a server side image map with CSS, building on the above suggestion?
My reasoning for both of the above is to save bandwidth, and increase load time, while preserving the option of showing a wonderful UI like that.
IeuanJ
If we can’t have embedded stylesheets (which your reason are good enough to suggest to me) then can we please get a link to the css file at least in the tutorials ? Or perhpas display the code inside the examples themselves as text on screen rather than have us grab the source of the page itself.
The logic of having beginners here is sound but also by stripping the css out and not linking it, they might have trouble finding it.
Plus here in work whenever I type the address of a css file into Ie it launches the thing in ruddy InterDev and I don’t have rights to change the lau=nch options.
Michael R. Havard
xtort,
I’d assume that you could spit out one large image and use the background-position property to manipulate what portion of the image is seen through the div. It would be a matter of mapping the server side image areas to top/bottom left/right background-position coordinates and setting the div height/width to get the proper look.
I think it would probably be better though to have several small images than one large one, unless you can assume that all your users are on an Intranet or broadband.
Tanny O'Haley
At the company I work for Netscape 4 users make up less than two percent of all individual users. That’s out of the millions of users we get every month. I think that the figure is around 10,000 users. We have now taken up the policy that Netscape 4 users no longer have to be supported. In this debate I’m trying to convince everyone that it would be better “gracefully degrade” for Netscape 4 users.
I think this is a nice option for an image map with the few corrections by dolphinling (http://www.alistapart.com/discuss/imagemap/5/#c6037). As others have said, this is not for every application, but it is another option to think about when designing a site. Especially with the rollover effect(sp?).
Peterman
“We have now taken up the policy that Netscape 4 users no longer have to be supported. In this debate I’m trying to convince everyone that it would be better “gracefully degrade” for Netscape 4 users.”
Agreed. However, I would say that you still ARE supporting NS 4. As long as all the relevant (or important or mission-critical, or whatever) content and functonality is accessible and usable in NS 4, it is supported. It’s just the presentation that differs.
My point is that one should be careful with the phrase “no need to support NS 4”, because it could be misinterpreted and (especially when it comes from us “standards” people) used as justification for making web sites that are completely unusable in NS 4.
LazyJim
That’s all very good, but to be honest, CSS-P not image maps. OK maybe calling it image maps is useful for people that want to carry on in the old ways using the new technologies, whatever.
Now, I was thinking the same as Lim Chee Aun on the <ul> thing.
And using the CSS preloading hover is a good idea too.
Charles
I wound up looking at this article hoping for a solution to a problem I have. I am trying to display charts that allow for heavy user interaction. The chart package I use happily provides an easy way to generate an image map. BUT—the effect I want is for the user to see the each chart region highlighted as the mouse hovers over it. Imagine the user is presented with a pie chart and when she hovers over a pie slice the border of slice becomes red instead of black. When the user clicks on the pie slice they get a menu that allows them to manipulate the chart in useful ways (for example change the color of the pie slice or see detail information)
This sounds like it ought to be a simple straightforward task for an image map, but is not. I have tried code such as this:
—————————————
code begins————————————<html>
<body>
<img
usemap=”#mymap”>
<map name=“mymap” id=“mymap”>
<area alt=“1” title=“1” shape=“poly” coords=“60,15,90,15,90,35,60,35”
tabindex=“1”
href=”#” target=“_self” >
<area id=“area1” alt=“2” title=“2” shape=“poly” tabindex=“2”
coords=“90,120,110,120,110,140,90,140” href=”#” target=“_self”
>
</map>
</body>
</html>
———————————————code ends————————————-
But without success—it does not reliably work.
I think that perhaps the only way I will be able to get the effect I want is to build—on the fly—transparent GIFs that show my desired outlines and use a rollover to display them. This is a pretty heavy weight solution both in terms of server resources and also from a number of images downloaded perspective—but seems to be the only way I am gonna get this effect in a reliable manner.
Any better ideas out there??? Thanks for reading.
Michael R. Havard
Charles it sounds as if you need a technology like flash or more likely SVG. Transform your charts into an interactive SVG image which can be scripted to provide the functionality that you want. People would then just need adobe’s svg viewer plugin.
I think there are ways to do it with CSS and HTML but SVG is a more appropriate technology.
Charles Belov
I like it too, and it does appear to meet accessibility for those who use screen readers. However, it does not appear to meet accessibility for people with low vision who do not use screen readers. I tried changing the font size in Mozilla using View/Text zoom and it (as expected) has no effect.
So somebody would have to code additional styles in their personal style sheet to navigate this page. (I don’t see any quick setting in Mozilla to ignore the currently active style sheet.)
Rachel Maxim
This method strikes me as a good way to create html-only versions of graphic-intensive flash sites. I agree, I’d rather use spans and have my markup a little less clear than use a deprecated tag like <i> – call me a purist but it just seems wrong! Maybe use <a> instead? Cool idea overall though.
Charlotte C.
The idea of css was originally that it was less of a hack than html – more elegant, more maintainable. But now we are seeing so many ‘techniques’ in css which are much more complex that the html methods they replace… such as this one. I don’t approve. css pages still don’t render the same in different browsers anymore than html code did. css has not proven to be an advantage, and this article is one more example of that.
Jeff N
The approach worked better then a map in our application and also reduced the final size of the code. Thank you for taking time to share your solution !! Some of us appreciate your efforts.
Jakob Stoeck
This solution, with the enhancements on the li and preload-stuff, seems very logical and flexible to me. For those who aren’t convinced: Imagine how you can print this page. Just make a print-stylesheet and there you go!
Michael Guitton
Please read Danny Goodman’s “Super-Efficient Image Rollovers” [1] featuring a 3-state rollover client-side image map—CSS + JavaScript combo. It works will all W3C DOM-compatible browsers (not tested with Safari though) and web crawlers!
[1] http://www.oreillynet.com/pub/a/javascript/2003/07/01/bonusrecipe.html
Indrajit Khare
In my summer job I ran accross a similar problem and reached a slightly different solution. Keep in mind though that I was designing only for IE6 (not a project that went to the web) so I was free of many constraints and constrained in many other ways.
I kept the background image just one whole image with the actual lettering (non glowing). I made an invisible link over the lettering (absolutely positioned) that contained a hidden (visibility: hidden;) image (the glowing lettering) that was shown by calling a javascript function when the mouse over rolled over (onmouseover) and hid it when it was rolled out (onmouseout).
Of course this doesn’t rely purely on XHTML and CSS and I didn’t really look into accessiblity and other such issues, but it was definely a lot less code than this technique and seems sound. I am sure with just a little more code this can be made accessible as well.
Jens Stavnstrup
Nice article. Unfortunalley it will only work in IE 5 and 6, if image is located in the upper-left corner.
If you set the body.margin to 50px, then it does not work. Althoug the CSS Map should be relative to the parent div object.
Keith Pepin
I really liked this article as it solved a problem for me with Elastic Design (see the “Elastic Design” article else where on this site). I was trying to create an elastic design where the images would scale in proportion to the rest of the text on the page. The problem was the specs required that certain images be clickable via image maps. How do you get an image map to scale when all of the coords are specified in pixels? Answer, you can’t. This method does however!
I’m including my sample code below so I can point out one minor problem I found in IE6. For the longest time, I couldn’t seem to click on the area I had defined except when I was directly over the small border I had made around the link (so I could see it). If I removed the border, I couldn’t click on the link at all! The answer seemed to lie with the background of the link. As soon as I set one, I could click on the area. We use a single transparent GIF in our pages for tracking and other purposes, which made me decide to try using it as a transparent background for the link. This solved the problem. Here’s the code in case any one else wants to review it.
<html>
<head>
<title>Untitled</title>
<style>
body {
font: 60%;
color: #000000;
margin-left: 50px;
}
div {
margin: 0px;
padding: 0px;
}
div#Charlize {
width: 13.8em;
height: 6.6em;
position: relative;
}
img#Charlize {
width: 13.8em;
height: 6.6em;
}
#menu {
position: relative;
}
#menu a i {
visibility: hidden;
}
#menu a {
position: absolute;
text-decoration: none;
border: solid 1px red;
background: url(“s.gif”);
width: 3.75em;
height: 1em;
top: 1.2em;
left: 7em;
}
#menu a:hover {
border: solid 1px yellow;
}
</style>
</head>
<body>
<div id=“Charlize”>
<div id=“menu”>
eyes
</div>
hp_spotlight_CharlizeTheron1.jpg
</div>
</body>
</html>
Chuck Bradley
In “Separate CSS file”…, Gabe wrote:
This is fantastic! I can’t believe I didn’t already know this. I’ll use this daily.
Thanks for the valuable hint Gabe.
kiji
I have coded a similar imagemap with text and image pop-ups) on www.jumbotours.co.jp/e/index.html but i’m puzzled with IE 6.0 behaviour. The list items are really close together and sometimes another underlying list/link show up through the pop-up. Any ideas?
Tim Brown
Cool! Answered my question (discussion page 2): http://www.alistapart.com/d/sprites/ala-blobs2.html
Brass
I think, that in example very hard pictures :(
In the net with slow modem this page will download very very long time…