以前就见过那种导航地图，点击地图的不同省份分别跳到不同的连接，现在用html实现一下，简单的。
图像映射是指一个图像可以建立多个连接，就是在图像上面定义多个区域，每个区域连接到不同的地址。
效果如图：(可以直接分别点击四个人物头像试试！)
点击索隆，跳到索隆。
点击索隆，跳到索隆。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 </script> 8 </head> 9 <body> 10 <img src="images/haizeiwang.jpg" usemap="#haizeiwang"> 11 <map name="haizeiwang"> 12 <!-- 娜美 --><area shape="rect" coords="360,60,500,400" href="http://b.hiphotos.bdimg.com/album/s=550;q=90;c=xiangce,100,100/sign=d74caf65b4003af349badc650511b761/d439b6003af33a8708cf4f76c45c10385343b538.jpg?referer=d74e5572bb389b5061e8d462f3d6&x=.jpg" target="_blank"> 13 <!-- 乔巴 --><area shape="rect" coords="250,330,360,500" href="http://g.hiphotos.bdimg.com/album/s=550;q=90;c=xiangce,100,100/sign=24bd57a9e2fe9925cf0c695504932fe2/2cf5e0fe9925bc3142f44ef45cdf8db1cb137034.jpg?referer=d7a90a9339c79f3dd6f6d000b0ea&x=.jpg" target="_blank"> 14 <!-- 山治 --><area shape="circle" coords="230,230,100" href="http://e.hiphotos.bdimg.com/album/s=550;q=90;c=xiangce,100,100/sign=5e8ee94fb27eca80160539e2a118e6e0/9213b07eca806538e048eb7f95dda144ad348238.jpg?referer=4b70b4479f16fdfa817bf2deeed6&x=.jpg" target="_blank"> 15 <!-- 索隆 --><area shape="poly" coords="130,20,200,50,160,150,60,200,50,100,100,70" href="http://g.hiphotos.bdimg.com/album/s=550;q=90;c=xiangce,100,100/sign=af1dc8ebd2a20cf44290feda46323a0b/b3b7d0a20cf431ad3d700c554936acaf2edd9838.jpg?referer=ccb657a9e2fe9925921b5d60d8d6&x=.jpg" target="_blank"> 16 </map> 17 <!-- 18 shape : 有几个选择：rect : 矩形，coords对应的坐标为左上角和右下角。 19 circle:圆，coords对应的是圆心（x，y），和半径r。 20 poly： 多边形，coords对应的是每个点的坐标。 21 coords：坐标，根据shape的值去定义。 22 href：链接。 23 --> 24 </body> 25 </html>我个人比较喜欢用在图片中有btn按钮时！简化了工作量 切图和html的书写！
Xee:这map标签用的比较少，但是所有主流浏览器都支持，而且html5还添加了新的属性，所以潜力无限！参考：HTML 5 <area> 标签。
<摘自：http://blog.csdn.net/qiantujava/article/details/18305709>
转载于:https://www.cnblogs.com/ChandlerVer5/p/image_map.html
