不知道多少人知道或者了解“图片映射”这个概念。我是去年毕业设计时，发现了这个神奇的东东，前几天服装网做专题又遇到类似的问题，大概是这个样子，有如下的一张地图；地图上的每一个图标标注的位置代表一个世界著名城市；现在想要的效果时，鼠标移到标注的位置上时，显示一段介绍文字。
看到产品需要这个效果；我就想到了图片映射；此处应有掌声。
代码大概如下：
<div class="region-position"> <img border="0" usemap="#planetmap" class="map-img" alt="Planets" src="image/map-bg.png"/> <map name="planetmap" id="planetmap"> <area class="position" shape="circle" coords="1175,100,10" title="莫斯科"/> <area class="position" shape="circle" coords="1020,177,10" title="土耳其"/> <area class="position" shape="circle" coords="1020,132,10" title="基辅"/> <area class="position" shape="circle" coords="952,146,10" title="米兰"/> <area class="position" shape="circle" coords="952,118,10" title="丹麦"/> <area class="position" shape="circle" coords="1280,190,10" title="首尔"/> <area class="position" shape="circle" coords="1323,167,10" title="东京"/> <area class="position" shape="circle" coords="700,194,10" title="纽约"/> <area class="position" shape="circle" coords="920,128,10" title="伦敦"/> <area class="position" shape="circle" coords="934,144,10" title="巴黎"/> <area class="position" shape="circle" coords="966,133,10" title="柏林"/> <area class="position" shape="circle" coords="1021,180,10" title="土耳其"/> <area class="position" shape="circle" coords="993,142,10" title="匈牙利"/> <area class="position" shape="circle" coords="930,170,10" title="巴塞罗那"/> <area class="position" shape="circle" coords="980,157,10" title="塞尔维亚"/> <area class="position" shape="circle" coords="963,168,10" title="意大利"/> <area class="position" shape="circle" coords="970,90,10" title="瑞典"/> </map> </div>
然后自己又翻了一下w3的解释；加深了一下理解。截了几张图，分享给大家。
先是MAP的介绍。
然后是area的用法
然后自己又查了一个shape这个属性（的shape属性有只有少数浏览器兼容）
其实w3是个好网站；看一看总有一些意想不到的收获。这么博客说了一些img-map的知识；同时延伸了一下；希望对大家有所帮助。
本文出自 “shuizhongyue” 博客，转载请与作者联系！
原文地址：http://shuizhongyue.blog.51cto.com/7439523/1694309
