html 图像映射（一个图像多个连接）

快来打我* 2022-09-22 11:40 166阅读 0赞

以前就见过那种导航地图，点击地图的不同省份分别跳到不同的连接，现在用html实现一下，简单的。

图像映射是指一个图像可以建立多个连接，就是在图像上面定义多个区域，每个区域连接到不同的地址。

效果如图：(可以直接分别点击四个人物头像试试！)

![c8ea15ce36d3d539689f40af3887e950352ab038.jpg_referer_669101b056e736d10104b838f0d6_x_.jpg][]

点击索隆，跳到索隆。

![20140115113441421][]

代码如下：

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/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%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/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%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/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%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/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****>**

# [HTML <map> 设置图热点][HTML _map_] #

需要在一张图片中，设置一个区域为热点就用到了<map>

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

![复制代码][copycode.gif]

所有主流浏览器都支持 <map> 标签。

## 提示和注释： ##

注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

## 语法 ##

### 属性值 ###

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word"> 
 <tbody> 
  <tr> 
   <th style="border:1px solid silver; border-collapse:collapse; padding:3px">值</th> 
   <th style="border:1px solid silver; border-collapse:collapse; padding:3px">描述</th> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px"><em>x1,y1,x2,y2</em></td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px"><em>x,y,radius</em></td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px"><em>x1,y1,x2,y2,..,xn,yn</em></td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。</td> 
  </tr> 
 </tbody> 
</table>

![复制代码][copycode.gif]

[c8ea15ce36d3d539689f40af3887e950352ab038.jpg_referer_669101b056e736d10104b838f0d6_x_.jpg]: /images/20220721/ad931b92850641e4aff4b42ea3271963.png
[20140115113441421]: /images/20220721/4256b28f585a4b53ba3d445a3c51758c.png
[view plain]: http://blog.csdn.net/qiantujava/article/details/18305709#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/157290
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/157290/fork
[HTML _map_]: http://www.cnblogs.com/wangyuelang0526/archive/2012/05/16/2503732.html
[copycode.gif]: /images/20220721/b4cc26c3db8e4294b7e8ec62d400d9a0.png