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

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

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

点击索隆，跳到索隆。

点击索隆，跳到索隆。

 <!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="data: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>

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

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

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

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

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

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  2. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

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

    定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...

  4. 图像映射<map>、<area>

    1.<map>定义图像映射,图像映射(image-map)指带有可单击区域的一幅图像. 2.<area>定义图像映射中的区域,area元素永远嵌套在map元素内部,area元素 ...

  5. html 图像映射

    个人先做而一个例子 <body> <img src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg&quo ...

  6. 图像热点&图像映射

    图像映射 图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容 ...

  7. HTML创建图像映射，布局，表单

    来源: 实验楼 创建图像映射 在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方.意思就是,一张 ...

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

    VC++  在使用 CImage 的Draw 输入一个图像时,有时候会造成图像失真严重,解决的方法如下 失真主要是由于变形造成的.只要设置一下变形的模式就可以了 ::SetStretchBltMode ...

  9. HTML图像映射

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. log4j 不同模块输出到不同的文件

    1.实现目标 不同业务的日志信息需要打印到不同的文件中,每天或者每个小时生成一个文件.如,注册的信息打印到register.log,每天凌晨生成一个register-年月日.log文件, 登录信息的日 ...

  2. 【php+mysql】博客分页制作思路

    1.首先需要初始化设置每页显示的文章数$page_size,mysql数据库中总的文章数$arc_size,页面数$page 2.利用分页公式 (当前页数 - 1 )X 每页条数 , 每页条数Sele ...

  3. [转]ASP.NET Core 之 Identity 入门（三）

    本文转自:http://www.cnblogs.com/savorboard/p/aspnetcore-identity3.html 前言 在上一篇文章中,我们学习了 CookieAuthentica ...

  4. 【2016-11-10】【坚持学习】【Day23】【Socket 编程初步了解】

    网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.

  5. 三维等值面提取算法（Dual Contouring）

    上一篇介绍了Marching Cubes算法,Marching Cubes算法是三维重建算法中的经典算法,算法主要思想是检测与等值面相交的体素单元并计算交点的坐标,然后对不同的相交情况利用查找表在体素 ...

  6. PHP实现多图片上传

    PHP实现多图片上传 今天在工作中遇到了一个需求:一个表单实现多个上传图片,类似于QQ空间上传照片的模式.即:可以一次性上传多个图片,但是封面图片只有一个. 最先,最重要的事,在服务器上对文件进行读写 ...

  7. 防SQL注入

    addslashes(); 一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库 ...

  8. HTML 学习笔记 JavaScript (Math和Number对象)

    标签: Math对象:数学对象,提供对数据的数学计算.如:获取绝对值,向上取整等.无构造函数,无法被初始化,只提供静态属性和方法. Number对象:Js中提供的数字的对象.包含整数,浮点数等等.并提 ...

  9. webstrom live templates

    javascript: 在live templates底部要选择javascript # $('#$END$') $ $($end$) $bd $(document.body) $d $(docume ...

  10. Struts2：Json插件_Ajax

    lib中加入包 struts2-json-plugin-2.3.20.jar json插件有自己的过滤器.返回类型 WebRoot下新建js文件夹 放入json2.js json2.js是一个著名开源 ...