详细解读html中的Map,area标签

一.定义

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

二.使用

1. <!--定义一个图像 他的边框为0(border) usemap(指定该图像被用作图像地图) "#mymap"(所使用的图像热点映射名称)-->  
2. <img src="logo.gif" border=0 usemap="#mymap">  
3. <!--定义热点映射--->  
4. <map name=mymap>  
5. <!---定义第一个热点区域---->  
6. <!--shape(定义热点区域形状) "rect"(矩形) coords(设定坐标) "0,0,(矩形左上角位置坐标)50,50,"(右下角位置坐标) href(设定超链接指向) "a.html"(超链接指向值)-->  
7. <area shape="rect" coords="0,0,50,50" href="a.html">  
8. <!--定义第二个热点区域-->  
9. <area shape="rect" coords="50,0,100,50" href="b.html">  
10. <!---定义第三个热点区域-->  
11. <area shape="rect" coords="100,0,150,50" href="c.html">  
12. </map>  

shqpe属性的设置说明:
1.rect 定义一个矩形区域,coords属性设置值为矩形的左上角,右下角的坐标,各个坐标值之间用逗号分开;
2.poly 定义一个多边形区域, coords属性设置值为多边形各项顶点的坐标值;
3.circle 定义一格圆形区域, coords属性设置值为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径.

 三.多边形示例

 

<table width="321px" height="446px" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><img src="__PUBLIC__/Uploads/tj/new/apptg.jpg" title="" width="" height="" usemap="#planetmap" />
<map name="planetmap">
<area shape="poly" coords="2,380,30,184,216,187,167,573,2,572" alt="Sun" href="/Students/makeOrder/tch_flag/1?tchs=Elsa" target="_blank">
<area shape="poly" coords="167,573,230,186,410,189,359,571" alt="Sun" href="/Students/makeOrder/tch_flag/1?tchs=Rose" target="_blank">
<area shape="poly" coords="359,571,422,187,608,187,560,570" alt="Sun" href="/Students/makeOrder/tch_flag/1?tchs=Elena" target="_blank">
<area shape="poly" coords="560,570,622,187,806,187,755,573" alt="Sun" href="/Students/makeOrder/tch_flag/1?tchs=Jasper" target="_blank">
<area shape="poly" coords="755,573,818,187,976,187,977,380,976,573" alt="Sun" href="/Students/makeOrder/tch_flag/1?tchs=Zeny" target="_blank">
</map>
</td>

</tr>

</table>