Question

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

不用DW 用手打代码来确定区域
<area
shape="rect"
coords="0,0,110,260"
href ="/img/eg_planets.jpg"
target ="_blank"
alt="Sun" />
像上面这样，怎么知道 “0,0,110,260”就是图片的热点区域

Answer 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

图示