Irregular Shaped Links and Image Maps?

[ethanmiller]

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?

[tordavis]

image map is old school. You might try flash or build the triangle from a chopped PSD and assign links to the chopped areas.

[Senff]

If I had to choose between Flash and image maps, I’d definitely take image maps.

As a matter of fact, that’s exactly what I would do in this case.

[ethanmiller]

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…

[Senff]

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.

[theacefes]

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.

[karl1146]

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.

[TheDoc]

“image map is old school. You might try flash or…”

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.

[ethanmiller]

@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…

[Senff]

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.

[Paulie_D]

I think we’d need to see an image of what he is after before considering alternatives to image maps.

[ethanmiller]

I’m still waiting for the image from the client. I’ll write again when it comes through, but thank you for the help so far. Very informative!

[ethanmiller]

@schmotty: you’re jsfiddle is interesting! i was having some trouble turning those

[Author]

Posts