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. mysql 从5.1升级到5.5.33 后 innodb 表出错 及 innodb表修复

    服务器使用的是mysql 5.1,了解到 5.5 系列的版本 innodb 的性能有很大提升,就想升级下.按照查到的步骤: http://www.myhack58.com/Article/sort09 ...

  2. [置顶] 自定义java Annotation快速入门与提高

    我们先来看看一个简单的注解类定义 import java.lang.annotation.Documented; import java.lang.annotation.Retention; impo ...

  3. 查询某库所有表的rows &查看当前sql的注册信息

    查询某库所有表的rows &查看当前sql的注册信息 1 2 3 4 5 6 7 select sobj.name,spar.rows FROM sys.objects sobj  INNER ...

  4. Http方式获取网络数据

    通过以下代码可以根据网址获取网页的html数据,安卓中获取网络数据的时候会用到,而且会用Java中的sax方式解析获取到数据.(sax解析主要是解析xml)具体代码如下: package com.wy ...

  5. IOS 调用系统相册或照相机tab按钮显示中文

  6. django学习之Model(二)

    继续(一)的内容: 1-跨文件的Models 在文件头部import进来,然后用ForeignKey关联上: from django.db import models from geography.m ...

  7. JVM调优总结(十二)-参考资料

    能整理出上面一些东西,也是因为站在巨人的肩上.下面是一些参考资料,供大家学习,大家有更好的,可以继续完善:) · Java 理论与实践: 垃圾收集简史 · Java SE 6 HotSpot[tm] ...

  8. HDU 3790 最短路径问题 (SPFA)

    转载请注明出处:http://blog.csdn.net/a1dark 分析:比一般最短路多了一个花费.多加一个判断即可.用的SPFA.这道题让我搞清楚了以前定义INF为啥爆的问题.受益颇多. #in ...

  9. 圣魔大战3(Castle Fantisia)艾伦希亚战记完美攻略

    作为城堡幻想曲系列续作,艾伦希亚战记继承了前作的战棋+养成模式进行游戏. (城堡幻想曲3,纠正大家个错误哦,不是圣魔大战3,圣魔大战是城堡幻想曲2,圣魔大战不是个系列,艾伦西亚战记==艾伦希亚战记,一 ...

  10. 基于JSP+SERVLET的新闻发布系统(二)

    接下来讲解的是通过AJAX验证用户名是否已经添加 用户名: <input type="text" name="userName" id="use ...