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

最新推荐文章于 2021-06-21 04:43:12 发布

最数据

最新推荐文章于 2021-06-21 04:43:12 发布

阅读量6.2k

点赞数

分类专栏： Html

Html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

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

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

点击索隆，跳到索隆。

代码如下：

[html]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>Insert title here</title>  
 <script type="text/javascript">  
 </script>  
 </head>  
 <body>  
     <img src="images/haizeiwang.jpg" usemap="#haizeiwang">  
     <map name="haizeiwang">  
         <!-- 娜美 --><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">  
         <!-- 乔巴 --><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">  
         <!-- 山治 --><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">  
         <!-- 索隆 --><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">  
     </map>  
     <!--   
         shape : 有几个选择：rect : 矩形，coords对应的坐标为左上角和右下角。  
                            circle:圆，coords对应的是圆心（x，y），和半径r。  
                            poly：   多边形，coords对应的是每个点的坐标。  
         coords：坐标，根据shape的值去定义。  
         href：链接。  
      -->  
 </body>  
 </html>  
 
 HTML <map> 设置图热点 
  
需要在一张图片中，设置一个区域为热点就用到了<map>
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
 
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" border="0" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" style="cursor: pointer" alt="Venus" />

  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> 

  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> 

</map>

所有主流浏览器都支持 <map> 标签。
提示和注释：注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
语法<a coords="value">属性值值描述
x1,y1,x2,y2如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

值	描述
x1,y1,x2,y2	如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius	如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn	如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

最数据

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
html 图像映射（一个图像多个连接）

以前就见过那种导航地图，点击地图的不同省份分别跳到不同的连接，现在用html实现一下，简单的。图像映射是指一个图像可以建立多个连接，就是在图像上面定义多个区域，每个区域连接到不同的地址。效果如图：(可以直接分别点击四个人物头像试试！)点击索隆，跳到索隆。代码如下：[html] view plain copy
复制链接

扫一扫