map标签的参数详细介绍及使用示例

map标签定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像,下面为大家介绍下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="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>

时间: 2024-10-03 20:35:09

map标签的参数详细介绍及使用示例的相关文章

Yii2增删改查之查询 where参数详细介绍_php实例

概述 由于官方手册关于where的介绍比较少,所以想自己整理一下,以便大家的学习和自己回头查询.本篇文章会详细介绍and.or.between.in.like在where方法中的使用方法和举例. and // 我们要查询id大于1并且小于3的数据 $userInfo = User::find()->where(['and' , 'id > 1' , 'id < 3'])->all(); // 或者用以下方式,更为安全 $userInfo = User::find()->whe

Yii2增删改查之查询 where参数详细介绍

概述 由于官方手册关于where的介绍比较少,所以想自己整理一下,以便大家的学习和自己回头查询.本篇文章会详细介绍and.or.between.in.like在where方法中的使用方法和举例. and // 我们要查询id大于1并且小于3的数据 $userInfo = User::find()->where(['and' , 'id > 1' , 'id < 3'])->all(); // 或者用以下方式,更为安全 $userInfo = User::find()->whe

ShellExecute 启动外部程序 参数详细介绍

ShellExecute的功能是运行一个外部程序(或者是打开一个已注册的文件.打开一个目录.打印一个文件等等),并对外部程序有一定的控制. 目录 1基本简介 2原型参数 3返回值 4例子 5特殊用法 6VB语言  概括  定义声明  参数说明  示例     1基本简介编辑 有几个API函数都可以实现这些功能,但是在大多数情况下ShellExecute是更多的被使用的,同时它并不是太复杂. 2原型参数编辑 注意事项:使用该函数时,需添加该头文件:[1]#include <shellapi.h>

【CURL (LIBCURL) 开发 之二】COCOS2DX 之深入(LIBCURL) 的CURL_EASY_SETOPT参数详细介绍!

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/curl-libcurl/880.html CURLOPT_HEADER:设为1,则在返回的内容里包含http header: CURLOPT_FOLLOWLOCATION:设为0,则不会自动301,302跳转: *CURLOPT_INFILESIZE: 当你上传一个文件到远程站点,这个选项告诉PHP你上传文件的大小. *CURLOPT_VE

redis数据库配置参数详细介绍

redis配置参数,非常的多,下面罗列了一些redis 常用参数配置,以及中文注释. /********************************* GENERAL *********************************/  // 是否作为守护进程运行  daemonize yes     // 如以后台进程运行,则需指定一个pid,默认为/var/run/redis.pid  // pidfile /var/run/redis.pid     // Redis默认监听端口 

Extjs4 GridPanel的主要配置参数详细介绍_extjs

1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel enableHdMenu:

css教程:关于CSS不透明的详细介绍

  近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器. 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性.它是一种非标准技术,应该是CSS3规范的一部分. 1. 旧的Opacity设置 以下代码是Fire

HTML head 头标签详细介绍

 HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要.了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的.本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签.元素的意义以及使用场景. DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的

small标签详细介绍

html教程,small标签详细介绍. 类似于<em></em>之类的短语元素,既可以改进文档结构,同时也保留了预期的视觉样式.但<small></small>在平时应用中不是很常见,第一眼的影响是淘宝UED是不是在这个小问题上疏忽了? 关于<small></small>,网上搜索下来的结果也很零碎,有的说不建议使用,也有的在废弃标签里没有提到它的名字.好在<精通HTML 语义.标准和样式>一书中对此作了详细的解释. &l