map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像，配合area标签
    area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
    例：要实现一幅地图上鼠标点击或者悬停在某个区域，可以显示出该区域的相关介绍，就需要
    这样的map+area标签的组合
<img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。

area标签中的属性：1.shape：定义该区域的形状
                      2.coords：可点击区域（对鼠标敏感区域）的坐标
                      3.href:定义该区域的URL即类似于a标签的用法提供链接
                      4.alt类似于img里的alt定义该区域的替换文本
 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>map和area标签</title>

 6 </head>

 7 <body>

 8

 9 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

10

11 <map name="planetmap" id="planetmap">

12     <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

13     <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

14     <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

15

16 </map>

17 </body>

18 </html>

map+area标签的更多相关文章

  1. HTML图片热区 map area 标签

    实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...

  2. 详细解读html中的Map,area标签

    一.定义 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 二.使用 <!--定义一个图像 他的边框为0(border) usemap(指定该图像被用作图像地图 ...

  3. map area 标签的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HTML <area> 标签 带有可点击区域的图像映射（图像映射指的是带有可点击区域的图像）

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  5. map，area标签

    map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...

  6. HTML中的map和area标签

    1. 标签介绍: (1)map标签: 该标签是指图片的映射,也就是说一张可以点击的图片的映射: 属性介绍: <1> id: <img>中的 usemap 属性可引用 <m ...

  7. html中map标签和area标签的应用

    map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档. 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name ...

  8. html中map标签和area标签的应用（总结）

    html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...

  9. HTML <area> 标签区域map标签

    1.距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)) <area shape="rect" coords="x1,y1,x2,y2" ...

随机推荐

  1. Linux等待队列（Wait Queue）

    1. Linux等待队列概述 Linux内核的等待队列(Wait Queue)是重要的数据结构,与进程调度机制紧密相关联,可以用来同步对系统资源的访问.异步事件通知.跨进程通信等.在Linux中,等待 ...

  2. Spring基础知识1--环境搭建、bean创建、依赖注入、注解注入

    一.Spring两大核心内容 1.控制反转IOC/DI:  应用本身不负责对象的创建和维护,对象和依赖对象的创建完全交给容器管理. 2.AOP(面向切面编程):通过预编译的方式,在运行期通过动态代理的 ...

  3. Python-字符串解析-正则-re

    正则表达式 特殊字符序列,匹配检索和替换文本 普通字符 + 特殊字符 + 数量,普通字符用来定边界 更改字符思路 字符串函数 > 正则 > for循环 元字符 匹配一个字符 # 元字符大写 ...

  4. K8S环境的Jenkin性能问题处理

    环境信息 在K8S环境通过helm部署了Jenkins(namespace为helm-jenkins),用于日常Java项目构建: kubernetes:1.15 jenkins:2.190.2 he ...

  5. Python3基础——序列类型

    开头写给自己,To Myself: 很久以来,都想要学习一门编程语言,从去年选择了python开始,反反复复重新开始了N多遍,每一次不会超过俩星期.昨天无意间翻开自己去年记的学习笔记,不禁感叹想当年我 ...

  6. >>8) & 0xFF中的 >> 和 &0xFF 的作用

    参考:https://blog.csdn.net/iamgamer/article/details/79354617 其中有两个位运算,一个是>>,一个是&. 0xff的作用一: ...

  7. API可视化管理平台YApi

    Yapi是什么 YApi 是高效.易用.功能强大的 api 管理平台,旨在为开发.产品.测试人员提供更优雅的接口管理服务.可以帮助开发者轻松创建.发布.维护 API,YApi 还为用户提供了优秀的交互 ...

  8. 多测师讲解自动化测试 _RF自定义关键字_高级讲师肖sir

    RF自定义关键字 在rf中叫关键字 在python中就叫做函数 或实例方法 我们自己可以写自定义关键字 自己创建一个库===库里面去创建模块===模块里面创建类和实例方法==>rf导入和引用 库 ...

  9. mysql 操作数据库

    创建数据库 CREATE {DATABASE | SCHEMA} [IF NOT EXISTS] db_name(数据库名字) #添加 IF NOT EXISTS,如果已有数据库,将会提醒,不会出现错 ...

  10. v-model数据绑定分析

    v-model数据绑定分析 v-model是Vue提供的指令,其主要作用是可以实现在表单<input>.<textarea>及<select>等元素以及组件上创建双 ...