General Questions About Image Maps

First off, I noticed that you can place the <map> tags anywhere in the document and the image map will work just fine. So, is it common practice for people to put the <map> tags in the <head>, or is it better practice to have it in the <body> immediately following the <img /> it corresponds to?

Second, I know the map tags aren't deprecated as of HTML5, and using tab you can jump through every link in a client side image map. Despite this, I hear a lot about image maps being old-fashioned and not accessible. Is this really true?

Finally, I always hear people saying there are better and more accessible ways to implement image maps using CSS or JavaScript, but I've never seen an example. Could someone show or link me to a cross-browser compatible example (i.e. works in IE).

Since no one else has input on this question, I figured that for completeness I would answer my own question with what I have learned so far.

According to W3Schools there are only six tags that should go in the Head element, and the Map / Area tags are not among the six. Additionally, by association it makes for more understandable markup when your map tag directly precedes the img tag.

As for the second question, I think the few sources I heard that from were either incorrect in their assessment or incorrectly referring to client-side image maps when they meant to say server-side image maps. Client-side image maps are very much accessible.

As alternatives to image maps:

There are a few non-JavaScript methods that accomplish the general image map effect using divs/spans, floating, z-indexing, and the hover pseudo-selectors to create image maps. However these should be avoided as an actual image map can accomplish the same effects by adding in JavaScript event handlers.

In JavaScript you can watch the coordinates of the mouse and set event handlers for when a user clicks inside a certain coordinate of an image, thus allowing you to programmatically duplicate the image map effect. However, because this technique only uses JavaScript, it should generally be avoided as it isn't accessible to people with JavaScript disabled.

ansaurus

tags:

views:

answers:

General Questions About Image Maps

related questions