Web accessibility service pageWeb accessibility service page

9.1:H109100 If possible, use a client-side image map instead of a server-side image map.

Improper design

Use the ismpa server-side image map design within the IMG label.

Improper design:

  <A href="cgi-bin/imagemap/map2.txt">
  <IMG src="images/map2.gif" alt="Three major Web site image map of Taiwan" ismap>
  </A>
          
Note:map2.txt provide the server-side image map link to the marked location in the region.

Proper demonstration

Use the usemap element in the client-side image map to replace the server-side image map design in the IMG label.

Proper example:

<P>
  <IMG src="images/map2.gif" width="472" height="94" usemap="#Map1" border="0" 
  alt="three major Web sites in Taiwan">
</P>
<MAP name="Map1"> 
  <area shape="rect" coords="10,8,158,86" href="http://www.yahoo.com.tw" alt="Yahoo!kimo">
  <area shape="rect" coords="161,8,309,86" href="http://www.pchome.com.tw" alt="PChome">
  <area shape="rect" coords="311,8,460,86" href="http://www.yam.com.tw" alt="yam">
</MAP>
          

The example below used both the server-side image map (ismap) as well as the client-side image map(usemap), when browser do not support server-side image map (ismap), the browser will use the client-side image map (usemap) instead.

Proper example:

 <A href="cgi-bin/imagemap/map2.txt">
  <IMG src="images/map2.gif" alt="three major Web site image map of Taiwan" usemap="#Map1" ismap>
 </A>
<MAP name="Map1"> 
  <area shape="rect" coords="10,8,158,86" href="http://www.yahoo.com.tw" alt="Yahoo!kimo">
  <area shape="rect" coords="161,8,309,86" href="http://www.pchome.com.tw" alt="PChome">
  <area shape="rect" coords="311,8,460,86" href="http://www.yam.com.tw" alt="yam">
</MAP>
          
End of Main Content