Discuss: Night of the Image Map

by Stuart Robertson

1 Good article.

It’s so obvious when it’s pointed out. Although the whole imagemap idea has disadvantages, you have demonstrated a situation where such a technique is viable and preferable to traditional HTML techniques.

One thing though, following all of the discussion about image replacement that’s been going on recently, it would enhance accessibility to use a technique other than visibility: hidden such as display: block; text-indent: -100em.

posted at 02:47 am on December 12, 2003 by Patrick Griffiths

2 But why?

Seems to me the only benefit this method has over “traditional” (X)HTML image maps is the ability to define a hover behaviour for the links, which is nice.

However, if you don’t need such an effect you’re MUCH better off (IMO) sticking to ordinary (X)HTML rather than hacking away at a heap of CSS positioning code. It works in all browsers, even Lynx and screen readers provided you specify alt attributes for all <area>s. Why use CSS to reinvent a perfectly good (and perfectly valid) HTML tag?

posted at 04:00 am on December 12, 2003 by Chris Hunt

3 Possible refinement

Nice.

And /very/ much nicer than slicing an image up into tables.

A refinement would be to not have any text on the background image, and to use a plain old Image Replacement Technique on the links to add (GIF) text on top of the (JPG) background image. This would allow highly-compressed bg images with nice clear text, and also allow easi(er) modification/translation of the text.

posted at 05:07 am on December 12, 2003 by AndrewF

4 Good Idea!

I must say, well thought out, for this particular problem. Just shows that all is possible with css. Thanks for sharing you ideas and problem solving techniques.

posted at 05:14 am on December 12, 2003 by Jacobus

5 Nice

This could go farther to, say, image maps with relative widths and stuff like that, wich people like. One of the best techniques I’ve read lateley. Realy! Good job!

posted at 06:11 am on December 12, 2003 by Optron

6 An interesting alternative

My first thoughts were with Chris Hunt: if the appropriate HTML exists for a particular feature, why not use it, especially as the amount of CSS required to replicate the effect will probably be far longer than the markup.

But then, HTML image maps work best when all you have a straightforward image that contains all the relevant links. What Stuart’s article shows us is that you can group related links together but display them visually in different parts of the screen, while keeping the group together in the markup.

While it would be possible to create a single image map that duplicates the visual layout of the example and retains the group of links, how would text and other content be placed between the links at the top and bottom of the page? Stuart’s technique keeps the links together in the markup and provides a lot of scope for laying out the rest of the content.

I’m not a great fan of absolute positioning, but when appropriate, why not?

posted at 07:17 am on December 12, 2003 by LintHuman

7 Very nice, but what are the benifits?

I like it. In reply to the first two posts; Why use this instead of XHTML? Because the old method is out of date, and not very resourceful maybe? Think about how easy it is to redesign a layout done in CSS. All the benefits in this situation apply. Think about how easy it is to apply changes in this situation!

My first point would be that it is so much easier to change the image map at any time. In fact you could have alternate image maps with alternate CSS files.

It may not make to much difference to the end user, but to us, the developers, it makes maintenance extremely easy!

posted at 07:55 am on December 12, 2003 by phil baines

8 List item

I wonder if the links should have been coded as list items?

By the way, the <i> tags seem redundant and non-semantical.

posted at 07:59 am on December 12, 2003 by Lim Chee Aun

9 I like it too!

I have used a similar technique on my site (http://jrickards.ca) with absolutely positioned <li>‘s.

Another problem with image maps is that for accessibility, the links must be repeated as text links and while that may be acceptable on some pages, in this type of page, an additional set of text links would reduce the visual quality of the page.

Also, I think the rollover images should be revised and also the CSS should be revised too. There is a technique (I forget what it is called or where it has been described) whereby the two states, normal and :hover (and :active too if you want) are combined into one graphic and the :hover (and :active) states (using CSS) slide the graphic an appropriate amount to display the “hover” section of the graphic. This techique does not require the different states of the image to be loaded but are loaded together and also, this technique reduces flickering in IE.

posted at 09:16 am on December 12, 2003 by Julian Rickards