HTML图片映射定位
在一张图片上，点击不同部分区域触发不同事件。
其实就是根据一张已知像素大小的图片，以其左上角作为远点坐标，建立一个右下方向为正轴的二维坐标系。然后建立矩形，圆形等区域并绑定href属性或者其他js事件即可。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- usemap 将图像定义为客户器端图像映射 -->
<img src="img/planets.gif" width="145" height="126" alt="planets" usemap="#plantmap"/>
<!-- map 客户端图像映射器。通过img标签的usemap与map的name绑定 -->
<map name="plantmap">
<!-- area 定义图像映射中的区域 -->
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com" target="_blank"/>
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.163.com" target="_parent"/>
<area shape="circle" coords="124,58,3" alt="Venus" href="http://www.qq.com" target="_top"/>
</map>
</body>
</html>
部分代码讲解：
矩形两点定坐标，圆形一点定坐标，起始坐标为（0，0），也就是图片左上角
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
效果图：
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
