首先在 img 里面加一个属性叫做 usemap 他要等于你要使用的 map 的 name 或者 id（视浏览器的情况而定所以通常会将那个map的这两个属性设置成一样的）这样就将map和img 关联起来了。

然后在 map 里面包围着 area , area 有几种属性：

  • coords（坐标，表示的是相对当前img的坐标， 也就是img 的左上角就是 0,0 其中有几个值要根据形状来定义）
  • shape（形状）
  • href（点击后跳转的链接，nohref 没有要跳转的目的）
  • target（_blank在新窗口中打开被链接文档。_self默认。在相同的框架中打开被链接文档。_parent在父框架集中打开被链接文档。_top在整个窗口中打开被链接文档。framename在指定的框架中打开被链接文档）

这样在点击图片的某一区域的时候就能实现跳转到不同的地方而不需要为了同一个图片点击不同的地方还要拆分图片来实现功能。

示例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>点击图片不同地方跳转不同页面</title>  
</head>  
<body>  
   // 打开页面显示的图片  
   <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">  
  
   /// img标签的usemap属性的值是下面map标签name属性的值（做关联）  
   <map name="planetmap">  
   // area标签的shape属性的值rect为矩形，矩形的coords属性值有四个，分别是选取矩形图片定位的值,前两个表示左上角的定位值，后两个表示右下角的定位置；（多边形可以继续增加坐标)  
   // area标签的shape属性的值circle为圆形，圆形coords属性值有三个，前两个表示选取圆形图片的中心定位的值，第三个值表示半径  
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">  
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">  
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">  
</map>  
  
</body>  
</html>