HTML图片热区是怎么做的？

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

shape="circle" coords="x,y,r" 区域为圆形 后面是圆心坐标和以像素为单位的半径

shape="rect" coords="x1,y1,x2,y2" 区域为矩形 矩形的左上右下两点的坐标

shape="poly" coords="x1,y1,x2,y2,x3,y3..." 区域为多边形 多边形所有顶点的坐标

以上所有坐标都是相对于图形img左上脚坐标而言的

<img>中的 usemap 属性可引用 <map>中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map>添加 id 和 name 属性。

其中如果area划分的区域部分交叉则前面的area覆盖后面的area.即第一个area覆盖第二个area。

<img>这个标记插入一个图片，src是指定图片的位置，border="0"是指插入的这个图片没有边框。你把数字由0改为1或2就能看出差别，usemap是为图片指定一个热区，一般是图片中的一个区域，点击这个区域会打开一个连接。alt="Planets"这个是指定当鼠标放到图片上面时显示Planets这些文字。<map>这个标签就是具体指定上面提到的那个热区的具体定义，<area>是具体指定它所在的位置，在这里shape="circle"是指定这个形状为圆形，下面是这个圆的坐标，180和139是圆心所在位置（相对于图片左上角的坐标），14是圆的半径。href="/example/html/venus.html"这个是点击这个热区的时候会打开的连接，target ="_blank"是指点击后在新窗口中打开（而不是在当前窗口打开），alt="Venus" 和上面的意思一样，当鼠标移到map定义的这个热区时会显示Venus这些文字。

另外这段HTML代码的最后好像缺了</map>。一般HTML标记是成对出来的，拿map为说，以<map>开始，中间是MAP的具体定义，而以</map>结束。

---