Grow your CSS skills. Land your dream job.

Irregular Shaped Links and Image Maps?

  • # May 30, 2012 at 4:45 pm

    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?

    # May 30, 2012 at 4:50 pm

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

    # May 30, 2012 at 4:52 pm

    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.

    # May 30, 2012 at 5:48 pm

    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…

    # May 30, 2012 at 6:02 pm

    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.

    # May 30, 2012 at 6:22 pm

    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.

    # May 30, 2012 at 7:39 pm

    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.

    # May 31, 2012 at 1:44 am

    “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.

    # May 31, 2012 at 5:26 am

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

    # May 31, 2012 at 7:12 am

    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.

    # May 31, 2012 at 11:07 am

    Does the entire shape need to be clickable or just the link inside it?

    Here is a CSS3 version of what I think you need.

    http://jsfiddle.net/Nu2wt/1/

    # May 31, 2012 at 11:16 am

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

    # June 2, 2012 at 7:24 am

    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!

    # June 2, 2012 at 7:29 am

    @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.
# June 8, 2012 at 4:05 pm

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.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".