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. 对之前IoT项目的完善

    博文有点长,因为是两个大项目(四个小项目)放一起了,不过都很适合新手小白(有源程序的情况),也可以再接 OLED 屏,就是前几篇博客的操作 一.esp8266 读取 DHT11 数据并通过微信小程序发 ...

  2. Python-进程-进程池-原理

    进程 资源集合,调度和分配资源,说到进程就不得不提到线程,线程和进程是密不可分,进程申请了资源,但真正使用资源的是线程,其实本质上类似面向对象的思想,面向对象把数据和数据的操作封装在一个类中,进程把资 ...

  3. gRPC-微服务间通信实践

    微服务间通信常见的两种方式 由于微服务架构慢慢被更多人使用后,迎面而来的问题是如何做好微服务间通信的方案.我们先分析下目前最常用的两种服务间通信方案. gRPC(rpc远程调用) 场景:A服务主动发起 ...

  4. 李宏毅老师机器学习第一课Linear regression

    机器学习就是让机器学会自动的找一个函数 学习图谱: 1.regression example appliation estimating the combat power(cp) of a pokem ...

  5. 046 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 08 for循环的注意事项

    046 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 08 for循环的注意事项 本文知识点:for循环的注意事项 for循环的注意事项 for循环有3个 ...

  6. P2652 同花顺

    P2652 同花顺 Link 题目背景 所谓同花顺,就是指一些扑克牌,它们花色相同,并且数字连续. 题目描述 现在我手里有 \(n\) 张扑克牌,但它们可能并不能凑成同花顺.我现在想知道,最少更换其中 ...

  7. pycharm 解决PEP8问题，配置autopep8到菜单栏

    autopep8是一个可以将Python代码自动排版为PEP8风格第三方包,使用它可以轻松地排版出格式优美整齐的代码.网络上有很多介绍如何在pycharm中配置autopep8的方案,但很多方案中还是 ...

  8. 阿里云服务器安装mongodb并且启动

    // 1.下载 我是直接在local里面创一个mongodb文件夹进行下载和解压 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_ ...

  9. Apache HttpClient 4.5 在Springboot中使用

    ConnectionRequestTimeout httpclient使用连接池来管理连接,这个时间就是从连接池获取连接的超时时间,可以想象下数据库连接池 ConnectTimeout 连接建立时间, ...

  10. BeetleX之webapi使用入门

    BeetleX是TCP通讯应用组件,在它之上可以扩展任何基于TCP的应用通讯功能.FastHttpApi是组件扩展的一个Http/Https/Websocket服务组件,它提供的功能丰富,包括功能有: ...