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

以前就见过那种导航地图，点击地图的不同省份分别跳到不同的连接，现在用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%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>

　　我个人比较喜欢用在图片中有btn按钮时！简化了工作量切图和html的书写！

　　Xee:这map标签用的比较少，但是所有主流浏览器都支持，而且html5还添加了新的属性，所以潜力无限！参考：HTML 5 <area> 标签。

<摘自：http://blog.csdn.net/qiantujava/article/details/18305709>

时间： 2025-01-31 07:56:29

html 图像映射（一个图像多个连接）的相关文章

HTML <area> 标签带有可点击区域的图像映射（图像映射指的是带有可点击区域的图像）

例子: <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="

HTML <map> 标签－创建带有可点击区域的图像映射

定义和用法定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域. <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性. 实例带有可点击区域的图像映射: <html> <

图像链接与图像映射的区别

既然是讲到图像,那就先介绍一下 HTML 中有关图像的元素:( 根据W3标准 ,元素不推荐的属性不做分析 ) <img>元素------向网页中嵌入一幅图像 img元素的属性: (1)src:图片来源URL. (2)alt: 规定图像的替代文本. (3)height和width:单位为像素,如果不指定,则为默认:如果只指定height或width,则自动调整大小. (4)ismap :将图像定义为服务器端图像映射. (5)usemap:将图像定义为客户器端图像映射. (6)longdes

图像映射

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href =&quo

图像热点&图像映射

图像映射图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容器,就是一个img标签,需使用usemap属性与map标签建立联系 2.图像映射,就是一个map标签,需要使用name属性与map标签建立联系 3.热点区域,需要使用map标签的子标签area来建立热点区域 ? 语法格式: <img src="1.jpg" usemap="

带有可点击区域的map图像映射

如果需要规定一个不规则点击区域可用map图像映射 <!doctype html> <html> <head> <meta charset="utf-8"> <title>map图像映射</title> </head> <body> <img src="3.jpg" border="0" usemap="#picmap" /&g

创建图像映射

图像映射:带有可点击区域的图像.通常不同区域对应不同的超级链接. 分类: 1.服务器端图像映射:把鼠标的 x.y 坐标(相对于图像的左上角)发送到服务器端.服务器端程序根据坐标来做出响应. 2.客户端图像映射:鼠标的坐标信息无需提交服务器,点击映射即可链接到目标位置. 用法 1.服务器端图像映射:

【创建图像映射】

<!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"> <tit

VC++ 在使用 CImage 的Draw 输入一个图像时,有时候会造成图像失真严重,解决的方法如下

VC++ 在使用 CImage 的Draw 输入一个图像时,有时候会造成图像失真严重,解决的方法如下失真主要是由于变形造成的.只要设置一下变形的模式就可以了 ::SetStretchBltMode(*pDc, HALFTONE); ::SetBrushOrgEx(*pDc, 0, 0, NULL); img.StretchBlt(*pDc, 20, 132, 140, 198, SRCCOPY);