热点链接(img map area)

怎么在一个图片中做多个链接呢？

热点链接可以帮你解决。

这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。

要完成地图区域超链接要用到三种标签：<img><map><area>。     

<img src="图形文件名" usemap="#图的名称">     

　　 <map name="图的名称">     

　　　　 <area shape=形状 coords=区域座标列表 href="URL资源地址">     

　　　　 <!--可根据需要定义多少个热点区域-->     

  　　　  <area shape=形状 coords=区域座标列表 href="URL资源地址">     

　　 </map>

【1】shape -- 定义热点形状          

　　 shape=rect：   矩形          

　　shape=circle：圆形          

　　shape=poly：   多边形
【2】coords -- 定义区域点的坐标
     a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标         

　　　　例：<area shape=rect coords=100,50,200,75 href="URL">
     b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度         

　　　　例：<area shape=circle coords=85,155,30 href="URL">
     c.任意图形（多边形）：将图形之每一转折点座标依序填入         

　　　　例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

　　demo :   

　　<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />

　　<map name="Map" id="Map">    

　　<area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>    

　　<area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />    

　　<area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />    

　　<area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />    

　　<!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->    

　　<!-- onFocus="this.blur()"   去掉虚线框 -->

</map>