图片映射（HTML <地图>标签）这么拽，小伙伴们都知道吗
日期：2014-05-16 浏览次数：20603 次
图片映射（HTML <map>标签）这么拽，小伙伴们都知道吗？
接下来，定义Map地图，并将Map分块，用以区分不同的内容区域。
在一些购物网站，我们总能看到一张大图，上面铺满充满诱惑的礼品，当我们轻轻地用鼠标单击一下，就跳转到这个宝贝的页面。 对于这个神奇的功能，身边的小伙伴们往往都被震惊了。要是能够学会这招技能，那该多好啊，以后再也不用去找美工切图，并且也不用为兼容这种浏览器而发愁了。
其实，对于这个看起来神奇的功能，实现起来却是相当的容易。只需要使用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
|
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
