图片映射（HTML <map>标签）这么拽，小伙伴们都知道吗？
浏览数：29 /
时间：2015年06月09日
在一些购物网站，我们总能看到一张大图，上面铺满充满诱惑的礼品，当我们轻轻地用鼠标单击一下，就跳转到这个宝贝的页面。 对于这个神奇的功能，身边的小伙伴们往往都被震惊了。要是能够学会这招技能，那该多好啊，以后再也不用去找美工切图，并且也不用为兼容这种浏览器而发愁了。
其实，对于这个看起来神奇的功能，实现起来却是相当的容易。只需要使用HTML的<img>标签、<map>标签和<area>标签就能实现这个强大的功能。但是如果想要把图片映射做的很强大的话，那也需要颇下一番功夫。不过今天小编已经整理好了攻略，你只需要本文的步骤，就可以轻松掌握这个技能。
首先，将想要显示的图片，使用HTML标签将其显示在页面中，代码很简单，不做过多解释。但是这里有一个关键的并不常用的属性，那就是usemap，它指定了你要选择的地图，也就是使用哪种地图方式来展示里面的链接。示例代码如下：
<img src="planets.jpg" border="0" usemap="#imgMap" alt="Planets" />
|
Map地图由<map>标签和<area>标签组成。<map>标签的定义非常简单，只需声明id和name即可，因为不同浏览器识别的标签不一样，所以id和name二者缺一不可。<area>标签因为不常用，下面的图表展示了各个属性所代表的的确切含义。
|
属性
|
值
|
描述
|
|
coords
|
坐标值
|
定义可点击区域（对鼠标敏感的区域）的坐标。
|
|
href
|
URL
|
定义此区域的目标 URL。
|
|
shape
|
default
rect
circ
poly
|
定义区域的形状。
|
|
target
|
_blank
_parent
_self
_top
|
规定在何处打开 href 属性指定的目标 URL。
|
Map地图的示例代码如下：
|
<map name="imgMap"
id="imgMap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
|
到此为止，我们就可以轻松创建自己的图片地图了。然而，对于如何图片中某个元素的坐标对很多小伙伴来说，仍然是一个难题，因为普通的看图软件根本无法查看每个元素的坐标位置。在这里，给大家推荐一款在线工具：Image-Maps 。我们只需在Image-Maps 上注册一个账号，就能够通过可视化工具对图片进行剪裁，获取裁剪的图片的坐标。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
