以前就见过那种导航地图，点击地图的不同省份分别跳到不同的连接，现在用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. node-sass安装不成功的解决方案

    最近在学webpack,需要用到sass-loader加载器解析.scss文件,安装sass-loader,必须先安装node-sass,node-sass纠正了两天,用npm install nod ...

  2. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 角色权限的配置页面改进优化

    往往开发的人不是维护的人,开发的单位不是维护的单位.信息的畅通沟通交流很多时候会有打折.扭曲.甚至是容易得到歪解.配置错业务操作权限.为了防止发生没必要的麻烦,甚至是发生重大错误,我们的软件需要不断换 ...

  3. CXF 动态创建客户端调用稳定版本号为2.7.18

    今天用动态创建客户端的方式调用webservice,报了这样一个错: 2017-01-05 20:51:46,029 DEBUG main org.apache.cxf.common.logging. ...

  4. SQL Server日志文件(LDF文件)

    一.日志文件过大处理方法: 1.设置数据库模式为简单模式:ALTER DATABASE 数据库名 SET RECOVERY SIMPLE 或者选中数据库-属性-选项-恢复模式设置为简单. 2.收缩日志 ...

  5. 错误"ORA-04091: table is mutating, trigger/function may not see it"的原因以及解决办法

    错误的原因该错误是在编写trigger时常遇到的问题,其根本原因是由于对本表的操作造成的.对于使用了for each row 的触发器,做了DML操作(delete,update,insert),还没 ...

  6. 微信内嵌html5页面清楚缓存

    给每个js添加一个版本号,每次修改js后改变一下版本号,浏览器即可自动刷新不用手动清理缓存 <script src="<%=path%>/js/boss/kpi/redli ...

  7. EF批量添加数据性能慢的问题的解决方案

    //EF批量添加数据性能慢的问题的解决方案 public ActionResult BatchAdd() { using (var db = new ToneRoad.CEA.DbContext.Db ...

  8. Asp.Net MVC3 简单入门详解过滤器Filter(转)

    前言 在开发大项目的时候总会有相关的AOP面向切面编程的组件,而MVC(特指:Asp.Net MVC,以下皆同)项目中不想让MVC开发人员去关心和写类似身份验证,日志,异常,行为截取等这部分重复的代码 ...

  9. 备忘：aliyun maven mirror

    <mirror>      <id>alimaven</id>      <name>aliyun maven</name>      &l ...

  10. 谈谈duilib

    据我所知,duilib已经不再维护了,q群也不再对外开放了. 尽管不再更新,但duilib的学习价值还是很好的.当有一定基础后再扩展duilib的功能,或根据duilib学习到的知识去着手写自己的界面 ...