1. 爱易网页
2. HTML教程
3. 图片映射（HTML <地图>标签）这么拽，小伙伴们都知道吗

日期：2014-05-16　 浏览次数：20546 次

图片映射（HTML <map>标签）这么拽，小伙伴们都知道吗？

　　在一些购物网站，我们总能看到一张大图，上面铺满充满诱惑的礼品，当我们轻轻地用鼠标单击一下，就跳转到这个宝贝的页面。 对于这个神奇的功能，身边的小伙伴们往往都被震惊了。要是能够学会这招技能，那该多好啊，以后再也不用去找美工切图，并且也不用为兼容这种浏览器而发愁了。

　　其实，对于这个看起来神奇的功能，实现起来却是相当的容易。只需要使用HTML的<img>标签、<map>标签和<area>标签就能实现这个强大的功能。但是如果想要把图片映射做的很强大的话，那也需要颇下一番功夫。不过今天小编已经整理好了攻略，你只需要本文的步骤，就可以轻松掌握这个技能。

　　首先，将想要显示的图片，使用HTML标签将其显示在页面中，代码很简单，不做过多解释。但是这里有一个关键的并不常用的属性，那就是usemap，它指定了你要选择的地图，也就是使用哪种地图方式来展示里面的链接。示例代码如下：

<img src="planets.jpg" border="0" usemap="#imgMap" alt="Planets" />

　　接下来，定义Map地图，并将Map分块，用以区分不同的内容区域。

　　Map地图由<map>标签和<area>标签组成。<map>标签的定义非常简单，只需声明id和name即可，因为不同浏览器识别的标签不一样，所以id和name二者缺一不可。<area>标签因为不常用，下面的图表展示了各个属性所代表的的确切含义。

属性	值	描述
coords	免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 相关资料更多> 怎么使用HTML5实现拍照下传应用 HTML代码的美感（通译） 不看的会懊悔，HTML5自助切图 HTML5/CSS3清新后台番外篇-添加锁屏效果 网页设计中Html使用的一些问题_HTML综合技巧_HtmlCss教程 Dhtml+Js算法:小球运动简化版,权变实现更简单的飞行的图片 请教移动设备的页面是如何做出来的 HTML+JS兑现可编辑表格 关于html网页制作的有关问题，大神帮帮忙 推荐阅读更多> 用html5实现涂擦效果？解决思路 为什么加入div标签后，表格边框消失了解决办法 30分钟学会正则表达式基础教程_HTML基础_前端技术 文档宣言<DOCTYPE html>导致document.body.offsetHeight取值为0 点击a页面链接怎么跳转到b页面的某一特定位置 Pro CSS Techniques 读书笔记（3） div left middle right 在DW8里面散架了 求大神指点解决方案 网页规划设计基础 [跨浏览器开发]A标记的href=""时，IE跟其他浏览器处理方式不一样 将JSP页面完善转换HTML页面 C#里面的Textbox设置Mode="MultiLine"那么相应的html的input应该设置type是什么呢，或者用什么代替？解决思路 HTML DOCTYPE标签三类别型 CSS兑现跨浏览器兼容性的盒阴影效果 HTML表格标志教程(35):跨列属性COLSPAN IE a:active bug(IE6/7/8/9) 非js解决方案交流,该怎么解决 请教怎么实现 鼠标移动 图片上时 图片颜色变暗，并在图上出现文字说明 CSS 惯用定位 HTML5拖放效能的注意点 c:标签传值,该怎么处理 统制 html元素 显示/隐藏