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标签的详细使用参数的更多相关文章

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

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

  2. 【hadoop】如何向map和reduce脚本传递参数,加载文件和目录

    本文主要讲解三个问题:       1 使用Java编写MapReduce程序时,如何向map.reduce函数传递参数.       2 使用Streaming编写MapReduce程序(C/C++ ...

  3. FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/

    http://www.woothemes.com/flexslider/ FlexSlider插件的详细设置参数 $(window).load(function() { $('.flexslider' ...

  4. (转)如何向map和reduce脚本传递参数

    [MapReduce] 如何向map和reduce脚本传递参数,加载文件和目录 分类: hadoop2014-04-28 21:30 1553人阅读 评论(0) 收藏 举报 hadoop 本文主要讲解 ...

  5. 使用Map标签指定点击区域时的兼容性问题

    电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页. 听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做. 简 ...

  6. 【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例

    JSF提供了大量的UI标签来简化创建视图.这些UI标签类似于ASP.NET中的服务器组件.使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到 ...

  7. HTML5中<template>标签的详细介绍

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

  8. 通过html<map>标签给图片加链接

    前面我们有谈到了通过图片定位给一张图片添加多个链接,现在用另外一种方法来实现,用html<map>标签给图片加链接 <img src="/images/hlj.jpg&qu ...

  9. (转)rabbitmq.config详细配置参数

    rabbitmq.config详细配置参数 Key Documentation tcp_listeners 用于监听 AMQP连接的端口列表(无SSL). 可以包含整数 (即"监听所有接口& ...

随机推荐

  1. 九度OnlineJudge之1022:游船出租

    题目描述:     现有公园游船租赁处请你编写一个租船管理系统.当游客租船时,管理员输入船号并按下S键,系统开始计时:当游客还船时,管理员输入船号并按下E键,系统结束计时.船号为不超过100的正整数. ...

  2. hdu-4302-Holedox Eating-线段树-单点更新,有策略的单点查询

    一開始实在是不知道怎么做,后来经过指导,猛然发现,仅仅须要记录某个区间内是否有值就可以. flag[i]:代表i区间内,共同拥有的蛋糕数量. 放置蛋糕的时候非常好操作,单点更新. ip:老鼠当前的位置 ...

  3. Activity的创建和使用

    Activity: 1:创建一个类继承Activity或者它的子类 public class MainActivity extends Activity { @Override protected v ...

  4. c++ 重载,覆盖,重定义 2

    前一篇 http://www.cnblogs.com/iois/p/4085173.html 写有些地方不够准确,重新整理了一遍 函数重载(Function Overloading) C++允许同一范 ...

  5. 在C#中使用C++编写的类1

    转载地址:http://blog.csdn.net/starlee/article/details/2864588 现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前 ...

  6. 02-Foundation-NSMutableString、NSNumber、NSValue、NSDate、NSArray

    目录: 一.NSMutableString可变字符串 二.NSNumber数字对象 三.NSValue 四.NSDate日期对象 五.NSArray数组对象 回到顶部 一.NSMutableStrin ...

  7. linux命令: tree的c实现

    tree命令的c语言实现. #include<stdio.h> #include<dirent.h> #include<sys/stat.h> #include&l ...

  8. linux下tomcat shutdown后 java进程依然存在

    今天遇到一个非常奇怪的问题,如标题所看到的: linux下(之所以强调linux下,是由于在windows下正常),运行tomcat ./shutdown.sh 后,尽管tomcat服务不能正常訪问了 ...

  9. State Design Pattern 状态设计模式

    设置好内部状态,然后依据不同的函数作为行为模式,进行状态转换. 有点像Finite Automata算法,两者的思想是一样的. 会Finite Automata,那么这个设计模式就非常easy了. # ...

  10. 【剑指offer】树的子结构

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25907685 剑指offer第18题,九度OJ上測试通过! 题目描写叙述: 输入两颗二叉树 ...