HTML 中image map使用

在Html中，给图像使用map标签，可以给图像的某个部分建立超连接，用法如下：

 <img src=img.gif usemap="#MAP-Name"> 
 <map name="MAP-Name" id="MAP-Name">  
   <area shape="rect|circle|poly" coords="#" href="url"> 
 </map> 

注:所有的坐标都是相对于图片左上角的

其中，坐标coords对各个shape的解释如下：

shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right

即，当shape是矩形时，coords表示矩形左上及右下(x2, y2)的坐标
shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius

即，当shape是圆形时，coords表示圆中心点坐标(x, y)及半径

shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...

即，当shape是poly多边形时，coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...

注意：以上所有坐标都是相对于图形img.gif左上脚坐标而言的

以下是一个例子:

 

<img src="mapimg.gif" usemap="#Face"> 
  <map name="Face"> 
    <area shape="rect" href="page.html" coords="140,20,280,60"> 
    <area shape="poly" href="image.html" coords="100,100,180,80,200,140"> 
    <area shape="circle" href="new.html" coords="80,100,60"> 
  </map>