HTML5 中创建图片点击热点区域时 怎么知道那个区域在哪

图片热点区域中，rect 矩形区域，使用2个做点来确定具体位置和大小。

shape="rect" 

coords="x1,y1,x2,y2"

以图片的左上角为坐标原点，矩形的左上角坐标x1,y1和矩形的右下角坐标x2,y2来确定具体位置和大小。

结合具体的代码来解释

coords="0,0,110,260"

0,0就是矩形的左上角坐标

该点距离图片的左上角横向距离为0

该点距离图片的左上角纵向距离为0

110,260就是矩形的右下角坐标

该点距离图片的左上角横向距离为110

该点距离图片的左上角纵向距离为260

图示

可以出现N个。具体格式如下：

<img src="images/XXX.gif" usemap="#Map" />

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

<area shape="rect" coords="12,6,24,19" href="#" />

<area shape="rect" coords="35,7,56,19" href="#" />

</map>

建议搜一下具体使用方法

<img src="xxx.jpg" border="0" usemap="#Map1" />

<map name="Map1">

<area shape="rect" coords="0,0,200,200" href ="xxx" target="_blank" />

</map>

area写法和a链接是一样的，只是多了区域和形状的属性，不写target默认为_self,新窗口打开加个_blank即可

---