map,area标签
map,area标签
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
<area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>
a、shape 属性:
| 值 | 描述 |
|---|---|
| default | 规定全部区域。 |
| rect | 定义矩形区域。 |
| circ | 定义圆形。 |
| poly | 定义多边形区域。 |
(建议使用缩写,最后写default)
b、coords 属性:
圆形: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 标签。浏览器会忽略超过图像边界范围之外的坐标)
c、nohref 属性规定该区域没有相关的链接: nohref="nohref"
map,area标签的更多相关文章
- map+area标签
map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签 area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域 例:要实现一幅地图上鼠标点击或者 ...
- HTML图片热区 map area 标签
实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...
- 详细解读html中的Map,area标签
一.定义 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 二.使用 <!--定义一个图像 他的边框为0(border) usemap(指定该图像被用作图像地图 ...
- map area 标签的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)
例子: <img src="planets.gif" width="145" height="126" alt="Plane ...
- HTML中的map和area标签
1. 标签介绍: (1)map标签: 该标签是指图片的映射,也就是说一张可以点击的图片的映射: 属性介绍: <1> id: <img>中的 usemap 属性可引用 <m ...
- html中map标签和area标签的应用
map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档. 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name ...
- html中map标签和area标签的应用(总结)
html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...
- HTML <area> 标签区域map标签
1.距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)) <area shape="rect" coords="x1,y1,x2,y2" ...
随机推荐
- C#线程(一)
本篇作为自己简要的笔记和整理,自己英语略渣 就不翻译了 参考http://www.albahari.com/threading 这里有翻译的http://www.cnblogs.com/miniwi ...
- margin 属性的相关问题
1.margin 的IE6 双边距问题 问题描述:浮动的块挨边框的时候会产生双倍的边距 解决方案: 1.增加display:inline; 2.去除float属性 2.margin 的重叠问题 CSS ...
- C++中 指针 与 引用 的区别
四点区别:可否为空,可否修改,使用时是否需要判断,使用场景 非空区别. 引用必须指向某个对象,而指针可以指向空. 可修改区别. 引用总是与初始化时的那个对象绑定,不可变更:指针可以重新赋值,指向另外一 ...
- 【转载】设备坐标(窗口/window)和逻辑坐标(视口/viewport)
一.预备知识 1.窗口是基于逻辑坐标的. 2.视口是基于设备坐标. 3.设备坐标是以像素为单位的,逻辑坐标是以.cm,m,mm,..... 4.系统最后一定要把逻辑坐标变为设备坐标. 5.设备坐标有3 ...
- Linux 下 Hadoop java api 问题
1. org.apache.hadoop.security.AccessControlException: Permission denied: user=opsuser, access=WRITE, ...
- javascript 绝对路径工具类
// #region 取虚拟目录示例代码 //获取网站虚拟目录名称 function GetVirtualDirectoryName() { var pathname = removeFirstSla ...
- hadoop配置及无法移动文件到hdfs故障解析
首先博主用的64位ubuntu,hadoop官方只提供32位版本,这样的话启动本地库无法兼容,需要自己编译为64位版本,或下载别人编译好的64位版本. 下载好需要在etc/hadoop目录下改动以下几 ...
- sql server 常见问题
自动生成的值 @@identity 存储过程参数应指定参数长度,且不大于数据库长度,自定义方法里如果有参数,也应指定长度,否则会报错,提取数据长度被断 connectionString 可以指定app ...
- 定时每天备份mysql
http://blog.csdn.net/panning_hu/article/details/9210001 Spring MVC Spring中MVC框架的底层实现 http://blog.csd ...
- Protel99se教程七:创建PCB元件封装
在上一节课当中,我们给大家讲解了如何制作SCH原理图的元件库,这一节课,我们给大家讲解的是如何制作protel99se封装,在我们制作好元件好,需要制作对应的封装库,以供PCB设计所用. 第一步:进入 ...