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. WAF的那些事

    介绍WAF 本节主要介绍WAF (Web Application Firewall, Web应用防火墙)及与其相关的知识,这里利用国际上公认的一种说法: Web应用防火墙是通过执行系列针对HTTP/H ...

  2. burp suite 之 intruder(入侵者)

    intruder:包括自动提交请求的功能 登录密码 撞库 注入 脱裤 Fuzz Burp intruder包含四个模块: Target:攻击的网站目标的详情信息 Positions :用来设置攻击类型 ...

  3. spring aop 源码分析（三） @Scope注解创建代理对象

    一.源码环境的搭建: @Component @Scope(scopeName = ConfigurableBeanFactory.SCOPE_SINGLETON,proxyMode = ScopedP ...

  4. 在C++中使用libuv时对回调的处理 (2)

    前情简介 在完成了第一版的<在C++中使用libuv时对回调的处理>之后,在对项目进行开发的时候,还是感觉有一些难受. 因为在实际操作的时候,需要构建一个结构体,并且需要对这个结构体的内存 ...

  5. 【题解】SAC E#1 - 一道难题 Tree

    Problem is here \(\text{Solution:}\) 首先,一眼看出这是最小割,只要叶子节点对汇点\(T\)连接流量为\(inf\)的边就可以一遍最大流搞定了. 剩下的问题在于,如 ...

  6. ThreeJS系列1_CinematicCameraJS插件详解

    ThreeJS系列1_CinematicCameraJS插件详解 接着上篇 ThreeJS系列1_CinematicCameraJS插件介绍 看属性的来龙去脉 看方法作用 通过调整属性查看效果 总结 ...

  7. NOIP提高组2018 D1T3 【赛道修建】

    颓了好几天,终于把这到题处理了一下. 话说,其实我考场上想出正解了,但是手残,算复杂度的时候多按了一个零,导致算出来是1亿多的复杂度,都不敢打...就把部分分都捡了一下... 题目描述: C 城将要举 ...

  8. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  9. 【Office-Word妙手回春】Word文本秒转表格

    第一步:Ctrl+A组合键,文本全选 第二步:插入→表格→文本转换成表格 第三步:在"文字分隔位置",勾选相应的符号. 此处的分隔符为 空格. 点击"确定"按钮 ...

  10. 设置 eclipse C++ 版本

    gcc 版本 4.8.5 20150623 (Red Hat 4.8.5-28) (GCC) 默认是使用 C++ 98 版本进行编译 设置 eclipse 中 C++ 的版本: Project  -& ...