个人先做而一个例子

<body>

<img  src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg" width="800px" height="600px" usemap="#m"  alt="图片加载有误"/>

<map name="m">

<area  shape="rect"   coords="10,10,100,100"       href="http://wwww.baidu.com" target="_blank" alt="图片加载有误"/>

<area  shape="rect"   coords="300,250,400,470"     href="图像映射/b.jpg" target="_blank"/>

<area  shape="circle" coords="200,200,90"          href="图像映射/b.jpg" target="_blank"/>

<area  shape="poly"   coords="0,500,0,600,100,550" href="图像映射/a.jpg" target="_blank"/>

</map>

</body>

</html>

运行结果

分析：

格式：

<map name="xyz">

<area  shape="" coords="" href="" target="" />

</map>

<img  src="" usemap="#xyz"  />

图像映射可以理解为图片加载图片，通过<img/>后添加<map>和<area>设置。

图像映射分为：

(1)服务器端图像映射：将点击的坐标发送给服务器，由服务器的脚本来决定。（例如：href="http://www.baidu.com"）

(2)客户端图像映射：根据点击位置不同确定链接目的。（例如：href="图像映射/a.jpg"）

知识点：

通过<img/>后添加<map>和<area>设置。

<map>元素表明映射的开始

<area>元素表明每个区域，如果要把一个图片分4个区域，则用4个area。

<map>元素只有一个name属性.

下面介绍area元素的属性：

(1)shape：必须的属性，用于描述区域的形状，rect\poly\circle\default 可选, 矩形\多边形\圆形，default指的是还没有被定义的区域。

(2)coords：

<!--"rect"表示该区域是矩形，"0,0,100,100"表示左上角的坐标和右下角的坐标，左上角“0,0”-->
<!--"circle"表示该区域为圆形，"10,10,5"表示圆心坐标和半径-->
<!--"poly"表示多边形，"0,0,100,100,234,234,123,123,245,245"表示所有顶点的坐标-->

(3)href和nohref：

　　href：href="http://www.baidu.com"，连接网页；

　　        href="图像映射/a.jpg" 连接大图片，（图片必须存在www目录下，否则找不到）

　　nohref：如果不指定href属性，则需要指定nohref，nohref="nohref"

(4)target：和<a>一样。

(5)alt：图片不显示的一种提示。

注意：

(1)在<img>中设置usemap属性。

(2)在<map>中设置name属性。

参考网页来源（感谢两位前辈）：

http://www.cnblogs.com/KeenLeung/archive/2012/11/04/2754142.html

http://blog.csdn.net/xiazdong/article/details/6805386

html 图像映射的更多相关文章

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

    以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...

  2. 图像映射map

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

  3. HTML图像映射

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

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

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

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

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

  6. 图像热点&图像映射

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

  7. 带有可点击区域的图像映射：HTML <map> 标签

    实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...

  8. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

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

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

随机推荐

  1. iOS 解决一个因三方静态库冲突产生的duplicate symbol的问题

    最近在开发项目时编译三方.a时出现了冲突,原因是存在duplicate symbol. <1>模拟器编译时,应用的即时通讯模块采用的三方库(容联云),和视频监控模块采用的三方库(海康威视) ...

  2. codevs 1432 总数统计

    1432 总数统计 时间限制: 1 s空间限制: 128000 KB题目等级 : 钻石 Diamond   题目描述 Description 给出n个数,统计两两之和小于k的方案数之和. 输入描述 I ...

  3. 为什么要用Markdown写东西

    为什么要用Markdown 不用费心去调格式了,比方说题目加粗什么的,删除线什么的,代码也只要四个空格就好了~ 学起来很简单,几乎没什么学习成本,而收益却很大 这几乎快让我我想从cnblog转到简书了 ...

  4. Git分支学习简记

    简介 开始过了两遍Git的内容,第二天就已经忘记了分支(branch)的概念,开始还觉得不太用的到.然后又看了第二遍,才发现为什么大家说这个是Git里边极其重要的一个东西. 所谓branch,就类似于 ...

  5. TortoiseSVN 过滤文件（包括已提交和未提交）

    一:svn 设置过滤文件方式 1.选中需要过滤的文件夹或者文件---右键---TortoiseSVN---Add to Ignore list(如果不显示说明该目录已经被添加) 2.在当前工作区域 不 ...

  6. POJ 2240 - Arbitrage（bellman_ford & floyd）

    题意: 给出一些货币和货币之间的兑换比率,问是否可以使某种货币经过一些列兑换之后,货币值增加. 举例说就是1美元经过一些兑换之后,超过1美元.可以输出Yes,否则输出No. 分析: 首先我们要把货币之 ...

  7. hdu 2007 - 平方和与立方和

    题目大意: 给定一段连续的整数,求出他们中所有偶数的平方和以及所有奇数的立方和. 解答: 坑你没商量!要考虑输入数a,b的大小.如果a>b,需要交换a,b的值. 1: #include<s ...

  8. Linux rsync网站目录同步功能的实现

    实现目标: 172.16.1.64服务器上的/var/www/sw_service目录,与172.16.1.60服务器上的/var/www/sw_service目录实现同步, 即1.60主动向1.64 ...

  9. python标准模块（二）

    本文会涉及到的模块: json.pickle urllib.Requests xml.etree configparser shutil.zipfile.tarfile 1. json & p ...

  10. java编程思想-java中的并发（一）

    一.基本的线程机制 并发编程使我们可以将程序划分为多个分离的.独立运行的任务.通过使用多线程机制,这些独立任务中的每一个都将由执行线程来驱动. 线程模型为编程带来了便利,它简化了在单一程序中同时jia ...