这几天在做网页的时候，有时候会需要一张图片中的局部产生链接，也就是<map></map>标签，而此标签可以和   <area>标签一起使用，来达到定义图像的映射（图像映射指的是带有可点击区域的图像）。<area>标签和<a>标签的区别不是很大，前者可以定义链接的区域。

几个属性： 

shape ：表示点击热点区域的形状，矩形rect，圆形circl，多边形poly。 
coords ：coords表示点击热点区域形状的坐标。坐标点（0,0）表示图片的左上角。 
   （1）矩形rect有4个数值（代表2个坐标），分别是矩形左上角坐标和矩形右下角坐标。                                                                      coords="left-top-width，left-top-height，right-bottom-width，right-bottom-height"
    （2）圆形circle有3个数值，前2个值为圆心坐标，第3个值为圆的半径大小。 
    （3）多边形poly，每两个数值组合表示一个坐标点，依次连线形成的区域就是最终的热点区域，可以根据自己需要设置。 
href ：表示锚点，跳转的页面。

                 <img src="img/flower.PNG"  alt=""  usemap="#flowermap" />
		     <map name="flowermap">
		     	<!--circle要求  coords="圆心坐标，半径"-->
		     	<!--rect要求  coords = "矩形左上角点的坐标，左下角点的坐标"-->
		     	  <area shape="circle" coords="90,140,50"  href="#"  target="_blank">
		     	  <area shape="rect"  coords="0,310,230,378" href="#" target="_blank"/>
		     	  <area shape="poly"  coords="436,39,344,179,444,357,560,221,496,135"  href="#" target="_blank"/>
		     </map>

 效果图：

                                                                                                                             元气少女，加油！