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

    一个Activity 对应 多个Fragment; 每一个类 extends Fragment , 一个Activity 可以同时显示多个 Fragment; Fragment是依赖于Activity ...

  2. Sublime Text 技巧

    让sublime text2支持中文 安装Sublime Package Control 在Sublime Text 2上用Ctrl+-打开控制台并在里面输入以下代码,Sublime Text 2就会 ...

  3. Entity Framework 6 with MySql

        MySQL Connector/Net 6.8.x MySQL Server 5.1 or above Entity Framework 6 assemblies .NET Framework ...

  4. Leetcode: Sudoku Solver

    July 19, 2015 Problem statement: Write a program to solve a Sudoku puzzle by filling the empty cells ...

  5. MySQL命令行登录的例子

    环境:MySQL Sever 5.1 + MySQL命令行工具 问题:MySQL命令行登录 解决: 命令 行登录语法: mysql –u用户名 [–h主机名或者IP地址] –p密码 说明:用户名是你登 ...

  6. 【2016-11-15】【坚持学习】【Day26】【通用的SQLHelper】

    今天看DevDemo源码时候看到一个写得很好的SQLHelper 代码 public class SqlHelper<T, Command> where T : DbConnection ...

  7. java内部类

    1.内部类 2.内部类的名字不会单独存在,根据外部类名的存在而存在.内部类的名字可以和外部其他类的名字一样. 3.这个this.num打印的是inner类里面的num 4.在内部类访问外部类成员变量方 ...

  8. BZOJ 3505 【Cqoi2014】 数三角形

    Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个. 下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. Input 输入一行,包含两个空格分隔的正整数m ...

  9. JS实现Observable观察者模式

    欢迎讨论与交流 : ) 注 代码参考自——汇智网 RxJS教程 前言 Observable观察者模式令小白笔者眼前一亮.数据生产者(observable)负责生产新鲜的数据,同时在生产完毕后'通知“消 ...

  10. java并发编程学习：如何等待多个线程执行完成后再继续后续处理(synchronized、join、FutureTask、CyclicBarrier)

    多线程应用中,经常会遇到这种场景:后面的处理,依赖前面的N个线程的处理结果,必须等前面的线程执行完毕后,后面的代码才允许执行. 在我不知道CyclicBarrier之前,最容易想到的就是放置一个公用的 ...