Fe-interview: [html] 第336天 当html中使用map标签时,area中coords值如何精确定位呢？

[haizhilin2013]

第336天 当html中使用map标签时,area中coords值如何精确定位呢？

我也要出题

[chenfaxiang]

在 area 标签上支持的属性有 shape、coords、href、alt、target、type、download、hreflang、media、rel`；

coords 值如何精确定位

1. 圆形，在绘制一个圆形时，其 shape='circle'，coords='x,y,r'，这里的 coords 值通过圆心(x,y)和半径r来确定位置和大小；
2. 矩形，在绘制一个矩形时，其 shape='rectangle'，coords='x1,y1,x2,y2'，这里的 coords 值通过两对确定位置顶点的值(x1,y1)和(x2,y2)来确定具体位置和大小；
3. 多边形，在绘制多边形时，其 shapre='palygon'，coords='x1,y1,x2,y2,x3,y3...'，这里的 coords 值通过多对确定位置顶点的值(x1,y1)、(x2,y2)、(x3,y3)... 来确定具体的位置和多边形的大小。

[webVueBlog]

你可以借助Dreamweaver来定位
coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。
这个原理是数学的坐标图，以作用区域的做下叫作为X=0,Y=0,Z=0这样的开始推算

形状1” coords=“区域座标列表1” href="跳转到的URL1">
形状2” coords=“区域座标列表2” href="跳转到的URL2">

【1】shape有以下几个参数：
shape='rectangle' 矩形
shape='circle'：圆形
shapre='palygon'： 多边形
【2】coords的意思是定义区域点的坐标
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
c.任意图形（多边形）：将图形之每一转折点座标依序填入

PS切图法

就是把咱要添加的图用PS打开，然后找到切图工具，切出想要加锚点的区域，然后点击右键“编辑切片选项”，就能看到四个数值了。
如果定义coords="a,b,c,d"的话，我们可以得出以下公式：
a=X
b=Y
c=W
d=Y+H

[longhui520]

• coords 中前2个数字代表左上角的坐标，后2个数字代表右下角的坐标，
  这样就可以形成一个矩形区域代表一个热点