coords 属性
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等
下面是几种可能：
圆形：shape="circle"，coords="x,y,z"
这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义举行实际上是定义带有四个顶点的多边形的一种简化方法。
注意：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
下面的示例 定义了 一个矩形 和 圆形的 热点
<map name="map"><area shape="rect" mce_shape="rect" coords="75,75,99,99" mce_coords="75,75,99,99" nohref="nohref"><area shape="circ" mce_shape="circ" coords="50,50,25" mce_coords="50,50,25" nohref="nohref"></map>
属性值
| 值 | 描述 |
|---|---|
| x1,y1,x2,y2 | 如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。 |
| x,y,radius | 如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。 |
| x1,y1,x2,y2,..,xn,yn | 如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。 |
常用找图片map描点坐标方法：
以上代码中最难写的部分莫过于coords的值了！下面我说说我亲测好用的两种方法，常用DW的人可以飘过了 ：）
第一种方法：PS切图法
就是把咱要添加的图用PS打开，然后找到切图工具，切出想要加锚点的区域，然后点击右键“编辑切片选项”，就能看到四个数值了。
如果定义coords="a,b,c,d"的话，那么参看图2我们可以得出以下公式：
a=X
b=Y
c=W
d=Y+H
图2，编辑切片选项时会看到四个数值：
第二种方法：MapEdit工具法
在搜索解决方法时，无意中看到了这种方法，借助一个叫Mapedit的小工具，也可以很方便的达到目的。
MapEdit是个小巧但是使用方便的制作图片锚点链接的小工具，后面会有下载链接。
运行MapEdit后，点“文件”－“新建HTML文档（打开图像）”，打开一张你要制作成锚点链接的图片，在“工具”里选择一种作用范围，比如“矩形”、“圆形”或“多边形”，然后就可以用鼠标在图片上画出作用范围了：按住鼠标左键不放，拖动鼠标选定一个范围，然后松开鼠标左键（具体方法和在WINDOWS系列操作系统上自带的“画图”差不多）就会自动弹出一个文本框，你只需在“鼠标单击对象的URL”处输入链接网址，然后按“确定”即可。依次类推，同样可加入其它的链接和作用范围。示例见图3：
图3，用MapEdit小工具快速添加图片锚点链接：
最后，在MapEdit里点击“文件”－“显示HTML代码”，将代码全部复制，然后在你的网站里写新文章，切换到“HTML原始码”状态，然后粘贴刚才复制的代码，不过要将img src="XXX"这行代码里的XXX改成你的这个图片的网址，然后提交该文章即可。
MapEdit工具下载
MapEdit这个小工具是外国人开发的，并不是免费软件，但是再强大的软件到了中国也难逃那些破解软件高手的魔掌，这不，我用的就是汉化破解版的，不会E文都没事！
解压密码见博客内文章
已有 815 位网友参与，快来吐槽：
发表评论