您的位置:首页 > Web前端 > HTML

(2010-08-24)html中的图像使用map标签

2010-08-24 12:57 375 查看
在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左上脚坐标而言的。

usemap是<img>标签的一个属性,用作指明所使用的图像地图名。
后面的#Map的Map就是用<map>标签定义的一个图像地图,它的name属性是Map,像下面这样定义:
<map name="Map">
<area shape=rect coods="100,100,200,200" href="test1.html">
<area shape=rect coods="200,100,300,200" href="test2.html">
...
</map>
使用时:
<img src="test.gif" usemap="#Map">
图像地图把一幅图像分成若干个区域,点击不同的区域会进入不同的页面。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: