I have a client who is thinking of a website concept that involves a multicolored triangle/diamond, with bands of color leading toward the center. The idea is to use the bands of color on the diamond/triangle as navigation. I'm trying to conceive of how this would be accomplished. Is the image map the way to do this? What is the status of the image map today? I had the impression it'd fallen out of favor. Are there other better ways to accomplish this?
Well, this needs to be done as quickly as possible also. It seems like Flash would be pretty time consuming. Senff, if you don't mind me asking, why is it acceptable to use image maps here? What are the problems/critique of image maps? It does seem surprising to me that given that image maps do seem to have a certain stigma, there aren't any obvious alternatives...
Image maps probably have that stigma because they were used for EVERYTHING that time -- not just for irregular shapes, but also for square areas (usually unnecessary and can be done more efficiently nowadays).
It's the same with tables, really. They got a bad reputation because for a while, people abused tables for everything related to layout, not just their main purpose (displaying tabular data), whereas nowadays layout should be done with CSS. But that doesn't mean that tables have lost ALL their purpose; they should still be used for why they were invented in the first place: displaying tabular data.
I think it's acceptable logical to use image maps here because it's the most obvious way to make irregularly shaped hotspots, and it's quite the exact reason why image maps were invented in the first place.
What Senff said as well as the fact that if you want your site to be even remotely mobile compatible and not run like garbage you should probably avoid Flash for one element like that.
Image maps are fine. "Old School" is much better than "Doesn't work at all on the iPad or iPhone and some other mobile browsers and may not work on many desktops in a few years, so now I not only have to Create the Flash but also have to create a fallback for iDevices, etc... ...like, say, an Image Map.
@senff: thank you for the explanation, really clarified the issues. one final question...what about the sprites method described here: http://www.alistapart.com/articles/sprites? i wonder if that is somehow preferable? time-wise it may be a bit more time-consuming...
Sprites are more useful when you want to use one large image (that consists of a bunch of smaller images) for a number of links to show different images. In the example you linked to, the irregularly shaped links are, in fact, rectangular areas and won't help you with triangular/diamond-shaped areas.
@schmotty: you're jsfiddle is interesting! i was having some trouble turning those elements into links, however. is it possible to make the entire shape of the angled colored li areas clickable as a link? i couldn't quite get it to work.
You could easily make wrap the span inside an a tag to make that clickable, but I turned the entire li tag, so it would have to be reworked to make it all clickable, but I think it is possible.
As a matter of fact, that's exactly what I would do in this case.
It's the same with tables, really. They got a bad reputation because for a while, people abused tables for everything related to layout, not just their main purpose (displaying tabular data), whereas nowadays layout should be done with CSS. But that doesn't mean that tables have lost ALL their purpose; they should still be used for why they were invented in the first place: displaying tabular data.
I think it's acceptable logical to use image maps here because it's the most obvious way to make irregularly shaped hotspots, and it's quite the exact reason why image maps were invented in the first place.
Well isn't that just a bit contradictory! Definitely don't go with flash. If an image map is what you need, there's certainly no harm in using it.
Here is a CSS3 version of what I think you need.
http://jsfiddle.net/Nu2wt/1/