html中的图像使用map标签

 

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

<img src=img.gif usemap="MAP-Name">
<map name="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左上脚坐标而言的

 

以下是一个例子:

<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 ALT="Solar System" USEMAP="#SystemMap">
 
<MAP NAME="SystemMap">
<AREA SHAPE="rect" COORDS="0,0,82,126" HREF="sun.gif" alt="sun" target="itest1">
<AREA SHAPE="circle" COORDS="90,58,3" HREF="merglobe.gif" alt="mercury">
<AREA SHAPE="circle" COORDS="124,58,8" HREF="venglobe.gif" alt="venus">
<AREA SHAPE="circle" COORDS="162,58,10" HREF="earglobe.gif" alt="earth">
<AREA SHAPE="circle" COORDS="203,58,8" HREF="marglobe.gif" alt="mars">
<AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,281,75,288,91,267,87,253,89,237,81,229,64,228,54" HREF="jupglobe.gif" alt="jupiter">
<AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,349,74,367,105,337,85,324,85,307,77,303,60,307,50" HREF="satglobe.gif" alt="saturn">
<AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44" HREF="uraglobe.gif" alt="uranus">
<AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,435,77,445,92,456,77,463,72,463,62,462,53,455,47" HREF="nepglobe.gif" alt="neptune">
<AREA SHAPE="circle" COORDS="479,66,3" HREF="pluglobe.gif" alt="pluto">
</MAP>