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

html-css046

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

图片热点区域中,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

图示

首先看下<area>标签的实现方法.

区域是根据属性coords里面的值来实现的.

所以,单单给图片增加img-responsive根本实现不了响应式.

这种效果,最好用flash来解决.

或者写很多个版本通过判断设备类型,尺寸来解决.

可你版面又这么复杂.