Please, for the life of Brian, give adequate thought to creating image maps (images that contain multiple links, mapped to different areas of the image.) While they can be useful, and even creative, they can also be confusing. (The one in the linked Wikipedia entry is a good example of a creatively-designed image map, that has some functional issues.)

In web design, you rely on certain conventions to indicate to the user what can be clicked on (ie-a link.) If you use an image as a link, users can see the image is click-able by mousing over it, and seeing if the pointer changes from an arrow to a hand. However, if you make an image into an image map, but divide the entire image into click-able sections, it can be hard to tell the different areas of the image link to different places. You can help alleviate this problem by restricting the click-able areas to distinct areas, separated by some non-click-able space, and also by using tool-tips or title tags to describe the link hidden in that part of the image.

My motivation for this post? My own damn library’s website. Check out the header on this page: http://www.library.csi.cuny.edu. It took me a moment to realize that the entire header didn’t link back to our website, but also contained a link to the school’s website. After much clicking and confusion, I realized that the bottom part of that image not only contains a link to the *school’s* website, but also the school *system.* Now, maybe you got that at first glance, but I honestly didn’t, and I highly doubt I’m the only one to make that mistake. Part of the problem is that the site was created years ago, and as I mentioned in the Harvard Library website post, alt tags are no longer rendered as tool tips by all browsers (I’m using Chrome, and they don’t show up when you hover over the links in it.)

I opened the page in Dreamweaver to be able to visualize where the links were mapped to (see below,) and I can honestly say that they tried to keep the links tight to the text, but I think that the bottom two links are just too close together for it to be quickly apparent to the user that they link to two separate places.

How would I have done it? I would have probably made the “CSI” part link to the school, and the rest would link to the library. I’d probably add the “City University of New York” as a regular text link, underneath the header image, or possibly just in the footer.

Just remember when creating image maps: unless the user hovers over various areas of the image to find the links/tool tips, there is no external indicator as to what part of the image links to what (ie-you can’t tell just by looking at it.) You have to rely on visual cues and web design standards to cue the user in to the fact that the image contains a.) a link and/or b.) multiple links. They may not take the time to wave their cursor across the whole image to discover just how many links there are, and what they link to.*

*Some cues that there are multiple links are:

• Scrolling over the image and noticing that the entire image is not click-able. Many developers will not bother creating an image map to insert a single link in an image, unless they have a good reason to; they’ll just make the entire image the link.
• Patterns… If it’s a picture of the solar system, and the first two planets are links, the user will guess that the rest of the planets are too. Same thing with maps where more than one location is linked, or groups of people where more than one person is linked. (etc, etc…)
• Added visual cues such as numbers, letters, or symbols that indicate where the user might find a link. (Example: http://www.frankmanno.com/ideas/css-imagemap/#ex)