HTMLmap标签图⽚区域链接
在Html中，给图像使⽤map标签，可以给图像的某个部分建⽴超连接，⽤法如下：
1. <img src=img.gif usemap="MAP-Name">
2. <map name="MAP-Name">
3. <area shape="rect|circle|poly" coords="#" href="url">
4. </map>
注：所有的坐标都是相对于图⽚左上⾓的
其中，坐标coords对各个shape的解释如下：
1. shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right
即，当shape是矩形时，coords表⽰矩形左上及右下(x2, y2)的坐标
引⽤
html图片展示特效
shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius
即，当shape是圆形时，coords表⽰圆中⼼点坐标(x, y)及半径
1. shape="poly" coords="x1,y1,x2,y2," // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...
即，当shape是poly多边形时，coords表⽰多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...
注意：以上所有坐标都是相对于图形img.gif左上脚坐标⽽⾔的
以下是⼀个例⼦:
1. <img src="mapimg.gif" usemap="#Face">
2. <map name="Face">
3.    <area shape="rect" href="page.html" coords="140,20,280,60">
4.    <area shape="poly" href="image.html" coords="100,100,180,80,200,140">
5.    <area shape="circle" href="new.html" coords="80,100,60">
6. </map>
下⾯是从中摘下来的⼀个实例：
1. <html>
2.    <body>
3.  <div align="center"><img src="city_map.gif" width="740" height="595" border="0" usemap="#Map">
4. <map name="Map">
5.  <area shape="rect" coords="613,103,659,129" href="hao.360/daxue/hlj.html" title="⿊龙江" target="_blank">
6.  <area shape="rect" coords="604,153,641,172" href="hao.360/daxue/jl.html" title="吉林" target="_blank">
7. <area shape="rect" coords="584,180,609,210" href="hao.360/daxue/ln.html" title="辽宁" target="_blank">
8. <area shape="rect" coords="411,208,472,228" href="hao.360/daxue/nm.html" title="内蒙" target="_blank">
9. <area shape="rect" coords="507,205,541,229" href="hao.360/daxue/bj.html" title="北京" target="_blank">
10. <area shape="rect" coords="524,230,566,248" href="hao.360/daxue/tj.html" title="天津" target="_blank">
11. <area shape="rect" coords="489,237,525,263" href="hao.360/daxue/hebei.html" title="河北" target="_blank">
12. <area shape="rect" coords="526,271,567,290" href="hao.360/daxue/sd.html" title="⼭东" target="_blank">
13. <area shape="rect" coords="454,261,486,284" href="hao.360/daxue/sx1.html" title="⼭西" target="_blank">
14. <area shape="rect" coords="381,250,412,284" href="hao.360/daxue/nx.html" title="宁夏" target="_blank">
15. <area shape="rect" coords="318,282,350,310" href="hao.360/daxue/qh.html" title="青海" target="_blank">
16. <area shape="rect" coords="362,291,389,326" href="hao.360/daxue/gs.html" title="⽢肃" target="_blank">
17. <area shape="rect" coords="409,319,445,348" href="hao.360/daxue/sx2.html" title="陕西" target="_blank">
18. <area shape="rect" coords="476,313,512,341" href="hao.360/daxue/henan.html" title="河南" target="_blank">
19. <area shape="rect" coords="527,344,558,377" href="hao.360/daxue/ah.html" title="安徽" target="_blank">
20. <area shape="rect" coords="558,328,585,356" href="hao.360/daxue/js.html" title="江苏" target="_blank">
21. <area shape="rect" coords="591,341,631,370" href="hao.360/daxue/sh.html" title="上海" target="_blank">
22. <area shape="rect" coords="564,371,597,403" href="hao.360/daxue/zj.html" title="浙江" target="_blank">
23. <area shape="rect" coords="605,431,645,461" href="hao.360/daxue/tw.html" title="台湾" target="_blank">
24. <area shape="rect" coords="194,374,239,395" href="hao.360/daxue/xz.html" title="西藏" target="_blank">
25. <area shape="rect" coords="348,351,380,387" href="hao.360/daxue/sc.html" title="四川" target="_blank">
26. <area shape="rect" coords="394,379,433,403" href="hao.360/daxue/cq.html" title="重庆" target="_blank">
27. <area shape="rect" coords="465,365,511,387" href="hao.360/daxue/hubei.html" title="湖北" target="_blank">
28. <area shape="rect" coords="511,401,542,430" href="hao.360/daxue/jx.html" title="江西" target="_blank">
29. <area shape="rect" coords="466,408,498,439" href="hao.360/daxue/hunan.html" title="湖南" target="_blank">
30. <area shape="rect" coords="397,418,433,454" href="hao.360/daxue/gz.html" title="贵州" target="_blank">
31. <area shape="rect" coords="338,458,367,494" href="hao.360/daxue/yn.html" title="云南" target="_blank">
32. <area shape="rect" coords="417,471,455,506" href="hao.360/daxue/gx.html" title="⼴西" target="_blank">
33. <area shape="rect" coords="492,470,539,494" href="hao.360/daxue/gd.html" title="⼴东" target="_blank">
34. <area shape="rect" coords="541,436,583,460" href="hao.360/daxue/fj.html" title="福建" target="_blank">
35. <area shape="rect" coords="511,497,548,523" href="hao.360/daxue/xg.html" title="⾹港" target="_blank">
36. <area shape="rect" coords="481,504,512,537" href="hao.360/daxue/am.html" title="澳门" target="_blank">
37. <area shape="rect" coords="429,541,470,573" href="hao.360/daxue/hn.html" title="海南" target="_blank">
38. <area shape="rect" coords="177,155,213,192" href="hao.360/daxue/xj.html" title="新疆" target="_blank">
39. </map>
40.      </div>
41.  </body>
42. </html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。