Client-side and server-side image maps appear similar at first. The major difference is in how they are coded and how they process input. Client-side image maps are defined using the usemap attribute and do not need to fall within an anchor tag (<a>). Client-side image maps also require the map tag (<map>) which is used to define the areas used as “hotspots” on the image.
Here is a sample code snippet of a client-side image map:
<img src="shapes.bmp" alt="Client-Side Image Map" usemap="#shapes" />
Notice that this is just like a normal image tag (<img>) but it has the addition of the usemap attribute. The usemap attribute identifies the name of map tag (<map>) that is used to define the areas of the image that are hotspots (links).
Here is a sample code snippet of the map tag:
<map name="shapes" id="shapes">
title="Rectangle" alt="Rectangle" />
title="Triangle" alt="Triangle" />
title="Circle" alt="Circle" />
In the above code, the usemap attribute points to a map tag called “shape” which defines the areas of the image map that are hotspots (links). There are three areas defined: a rectangle, a polygon (triangle) and a circle. Notice also that the three image map areas have alt text that adequately describes the links in the image. This is required for accessibility.
Here is a screen shot of a client-side image map as defined in the example code snippet above:
Notice the dashed line around the rectangle showing the current keyboard focus and the tool tip that is displaying the alt text for this area that says "Rectangle".
Select Next to learn about testing client-side server maps.