map标签的详细使用参数
map标签必须成对出现,即
<map> ....</map>
同时map必须和area配合使用。
img标签里的usermap属性值必须与map标签里的id和name值完全一致
area标签:定义图片的点击区域 area 是单标签,不成对。
属性:
accesskey 快捷键
alt 图片提示文字
coords 定义和点击区域的图形的坐标
href 链接地址
nohref 图像点击可排除的区域,当不是有href时,需要使用nohref
shape 可点击区域的形状
tabindex tab键遍历
target 链接目标
代码实例:
<img src="data:images/logo.gif" usermap="#map"/>
<map id="map" name="map">
<area shape="rect" coords="a,b,c,d" target="_blank" href=""/>
<!-- a,b,c,d分别是矩形的左上角和右下角的坐标值 !>
<area shape="circle" coords="a,b" target="_blank" href="" />
<!-- a,b分别是圆形的圆心的坐标值 !>
<area shape="poly" coords="a,b..." target="_blank" href="" />
<!-- a,b分别是多边形的各个定点的坐标值 !>
</map>
map标签的详细使用参数的更多相关文章
- HTML <map> 标签-创建带有可点击区域的图像映射
定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...
- 【hadoop】如何向map和reduce脚本传递参数,加载文件和目录
本文主要讲解三个问题: 1 使用Java编写MapReduce程序时,如何向map.reduce函数传递参数. 2 使用Streaming编写MapReduce程序(C/C++ ...
- FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/
http://www.woothemes.com/flexslider/ FlexSlider插件的详细设置参数 $(window).load(function() { $('.flexslider' ...
- (转)如何向map和reduce脚本传递参数
[MapReduce] 如何向map和reduce脚本传递参数,加载文件和目录 分类: hadoop2014-04-28 21:30 1553人阅读 评论(0) 收藏 举报 hadoop 本文主要讲解 ...
- 使用Map标签指定点击区域时的兼容性问题
电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页. 听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做. 简 ...
- 【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例
JSF提供了大量的UI标签来简化创建视图.这些UI标签类似于ASP.NET中的服务器组件.使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到 ...
- HTML5中<template>标签的详细介绍
HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...
- 通过html<map>标签给图片加链接
前面我们有谈到了通过图片定位给一张图片添加多个链接,现在用另外一种方法来实现,用html<map>标签给图片加链接 <img src="/images/hlj.jpg&qu ...
- (转)rabbitmq.config详细配置参数
rabbitmq.config详细配置参数 Key Documentation tcp_listeners 用于监听 AMQP连接的端口列表(无SSL). 可以包含整数 (即"监听所有接口& ...
随机推荐
- SilkTest天龙八部系列7-动态对象识别
在测试web应用时,我们常常需要面对web页面对象变化频繁,并且使用预定义方式识别对象慢的困难.为了解决这些问题,SilkTest引入了dynamic object recognition技术,它使用 ...
- The connection to adb is down, and a severe error has occured.问题解决
遇到问题描述: 运行android程序控制台输出 [2013-06-25 11:10:32 - MyWellnessTracker] The connection to adb is down, an ...
- 保护DNS服务器3大方法
保护DNS服务器3大方法 DNS全称DomainNameSystem域名解析系统,通俗地说,DNS就是帮助用户在Internet上寻找名称与IP对应的解析服务.为了更方便使用网络资源,DN ...
- 在eclipse上安装 sdk出现的各种问题
在eclipse上下进行android开发需要 有android SDK 和ADT 一般adt版本瑶台低, 会被提示安装较高版本的ADT, 不然, SDK可能无法使用 在安装 SDK过程中出现这样 ...
- 富文本编辑器 - wangEditor 表情
效果: 文件夹中的表情: 代码:
- Android FindMyPhone功能模块的实现
类似iPhone手机上面“查找我的iPhone” 1. 手机定位 需要考虑到国内和国外,国内使用百度地图,国外使用google地图,两种地图,属于不同的坐标系. 手机这边为了避免不同坐标系的问题,直接 ...
- Beginning MyBatis 3 Part 2 : How to Handle One-to-Many and One-to-One Selects
One of the latest MyBatis feature is the ability to use Annotations or XML to do One-to-One or One-t ...
- 如何查询一个库文件属于哪个rpm包
1.如果这个库文件已经存在 使用rpm命令: # rpm -qf /file/path (绝对路径) 例如: # rpm -qf /lib/libm.so.6 glibc-2.12-1.47.el ...
- HTTP 错误 500.19 – Internal Server Error web.config 文件的 system.webServer/httpErrors 节中不允许绝对物理路径“C:\inetpub\custerr”[转]
给ASP或者ASP.NET等需要配置IIS服务器的过程中,很可能会遇到以下两种错误.尤其是用Win7系统的,配置IIS7.0版本比用XP系统配置IIS5.1版本而言要复杂复杂一些.当同时需要配置ASP ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...