img 标签的 usemap 属性
<img src="1.gif" alt="Planets" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="11,10,180,180" href="detail/Best_marketing.html">
<area shape="rect" coords="198,13,364,175" href="detail/General_manager.html">
</map>
上面这段源代码将一幅图像 1gif 映射为 3 个区域,当用户单击其中某一个区域时,将被链接到不同的文档中。
usemap 属性将图像定义为客户端图像映射。
图像映射指的是带有可点击区域的图像。
usemap 属性与 <map> 元素的 name 或 id 属性相关联,以建立 <img> 与 <map> 之间的关系。
ismap 属性和 usemap 属性的应用差异
地图就是很好地应用 ismap 和 usemap 属性的一个示例,例如,在浏览一家全国范围的大公司网页时,用户可能会在地图上单击他们所居住的城市,以获得附近地区零售店的地址和电话号码等。
usemap 客户端处理图像映射的好处是,它不要求有服务器或特殊的服务器软件,与 ismap 机制不同,它可以用在非 web (无网络)环境中,例如在本地的文件或者 CD-ROM 中使用。
/*
所有主流浏览器都支持 <area> 标签。
*/
<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。
area 元素总是嵌套在 <map> 标签中。
注释:<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定),所以我们需要同时向 <map> 添加 id 和 name 两个属性。
coords 属性规定区域的 x 和 y 坐标。
coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。
图像左上角的坐标是 "0,0"。
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
下面列出了每种形状的适当值:
圆形:shape="circle",coords="x,y,z"
这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形:shape="rectangle",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
(如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。)
找到一个简单易懂的链接 特此发表 http://jingyan.baidu.com/article/a948d6510eadf00a2ccd2e77.html
img 标签的 usemap 属性的更多相关文章
- CSS_img标签usemap属性图片中选择区域加入超链接
例子: <IMG usemap="#Map" alt="" src="/images/banbian.jpg"> <map ...
- HTML <a> 标签的 target 属性
HTML <a> 标签的 target 属性 HTML <a> 标签 定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a ...
- JS组件系列——使用HTML标签的data属性初始化JS组件
前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...
- 常见标签的默认属性值及相互作用——关于CSS reset的思考
在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...
- 局部(或全局)设置<a>标签的target属性
对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大大的提高访客的体验感.我们一般对target的设置可以挨个来,但 ...
- 【HTML5 video】video标签的部分属性解析
转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Th ...
- HTML5 <a>标签的ping属性用法
随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...
- 查看某个html标签有哪些属性和事件
<html><head><script> //查看input标签有哪些属性和事件 function a() { var str = new String(" ...
- HTML <input> 标签的 type 属性
HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...
随机推荐
- thymeleaf:日常使用总结
1.th:href 获得当前的根路径 th:href="@{/}" 2.select输出并自动选中 <select class="form-control sele ...
- 51nod--1298 (计算几何基础)
题目: 1298 圆与三角形 题目来源: HackerRank 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出圆的圆心和半径,以及三角形的三个顶点,问圆 ...
- MySQL NULL处理
-- 首先在用户表中插入数据如下 TRUNCATE TABLE UserInfo ; INSERT INTO `userinfo`(`ID`,`UserName`,`UserLogin`,`User ...
- 6)django-示例(fbv)
FBV(function base view),即一个url对应views.py一个函数 示例演示如下 1)FBV如何使用 2)渲染页面,并返回字典数据 3)字典数据页面如何访问 1)url.py f ...
- windows与mac下安装nginx
window下 下载链接,自己选一个版本下载 nginx官网下载 本人放在D盘: 启动nginx 有很多种方法启动nginx (1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过 (2)打开 ...
- vue-列表嵌套
- npm常用模块
https://blog.csdn.net/heliumlau/article/details/70577727
- AngularJs中,如何在ng-repeat完成之后,执行Js脚本
//ng-repeat生成4个li,生成后再执行自定义方法fn在每个li后加一根横线 <script> var myapp=angular.module('myapp',[]); myap ...
- 网络编程—tcp
一.TCP简介 TCP介绍 TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF ...
- 2017-2018-2 20165314 实验三《 敏捷开发与XP实践》实验报告
知识点: 1.XP团队使用现场客户.特殊计划方法和持续测试来提供快速的反馈和全面的交流: -XP是以开发符合客户需要的软件为目标而产生的一种方法论 -XP是一种以实践为基础的软件工程过程和思想 -XP ...