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文都没事!
解压密码见博客内文章
已有 749 位网友参与,快来吐槽:
发表评论