[thelist] Image maps - Do I have a bad feeling about them for a reason?

[Stephen Rider]

On Jan 11, 2008, at 4:59 PM, Jon Hughes wrote:

> I am wondering - do you know of a valid reason NOT to use an imagemap?
> My first indicators are: search engines probably ignore them, and it
> looks like thick, heavy tag soup, but other than that, it's all  
> fine and
> dandy.  Accessibility problems, maybe?

Image Maps can be accessible if made properly, so that's not an  
issue.  A List Apart had an article a while ago about image swapping  
on rollover, so if you spend a bit of time with it you can even get  
some interesting visual effects.

The following is an example from an imagemap I made for an apartment  
building.  the page is offline, so I can't link it, but the image was  
a floorplan of the entire building, with all apartments of a  
particular size (one bedroom, two bedroom, etc.) highlighted.

The coordinates are complex because I actually outlined the units in  
detail, following every little turn of the walls.  Coordinates can of  
course be _much_ simpler -- if using circular targets, it's just a  
center and a radius.  (With polygonal targets, it's kind of like  
connect-the-dots.)

Note the alt and title attributes.  In a non-visual browser, these  
show up just as image alts would.

Also, I just tested -- you can tab from target to target in this  
imagemap -- in a Mozilla browser at least.  No visual indication  
except for the link showing in the status bar though....

***example***
<img src="100mainst-floorplan-2br.gif" usemap="#100mainst" alt="Floor  
Plan image map" border="0" />
<map name="100mainst" id="100mainst">
<area shape="poly"  
coords="474,51,471,202,426,201,426,193,413,193,413,163,354,162,354,140,3 
33,140,331,120,317,119,317,51" href="01-apt-2br.htm" alt="Unit 01"  
title="Unit 01" />
<area shape="poly"  
coords="470,204,471,283,386,283,386,256,317,255,317,250,283,249,282,238, 
273,237,274,193,319,193,319,183,393,184,394,213,413,213,413,193,423,194, 
424,204" href="02-apt-2br.htm" alt="Unit 02" title="Unit 02" />
</map>
***end example***

Stephen Rider