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. 遍历 Dictionary，你会几种方式？

    一:背景 1. 讲故事 昨天在 StackOverflow 上看到一个很有趣的问题,说: 你会几种遍历字典的方式,然后跟帖就是各种奇葩的回答,挺有意思,马上就要国庆了,娱乐娱乐吧,说说这种挺无聊的问题 ...

  2. unittest培训后总结记录

    今天在给同学们上了自动化测试单元框架unittest之后,突发奇想,要总结下自己今天上的课程内容.于是有了下面的一幕: 首先,今天上课的目标是要学会关于unittest框架的基本使用及断言.批量执行. ...

  3. 这里有一份Java程序员的珍藏书单，请您注意查收

    前言 不要因为迷茫,而停止了脚下前进的路.给大家推荐一份Java程序员必看的书单,豆瓣评分都挺不错的,每一本都值得去读,都值得去收藏,加油呀 本文已经收录到github https://github. ...

  4. 玩命学JVM（二）—类加载机制

    前言 Java程序运行图: 上一篇玩命学JVM(一)-认识JVM和字节码文件我们简单认识了 JVM 和字节码文件.那JVM是如何使用字节码文件的呢?从上图清晰地可以看到,JVM 通过类加载器完成了这一 ...

  5. Effective C++ 读书笔记 名博客

    https://www.cnblogs.com/harlanc/tag/effective%20c%2B%2B/default.html?page=3

  6. Centos最小化安装后，不能使用yum命令的解决办法

    刚刚最小化方式安装了CentOS 7 后,想查看一下config,却发现没有config文件,就想用yum下载一个,但是发现yum不能正常工作!!! 一,输入安装X Window命令,安装出错!! 在 ...

  7. 蒲公英 · JELLY技术周刊 Vol.25 · Webpack 5 正式发布，你学废了么

    蒲公英 · JELLY技术周刊 Vol.25 阔别两年,Webpack 5 正式发布了,不仅清理掉很多冗余的功能,同样也为我们带来了很多新鲜的能力,不论是默认开启的持久缓存,还是反病毒保护,亦或者被其 ...

  8. MySQL 8 新特性之Clone Plugin

    Clone Plugin是MySQL 8.0.17引入的一个重大特性,为什么要实现这个特性呢?个人感觉,主要还是为Group Replication服务.在Group Replication中,添加一 ...

  9. Linux给特定进程单独指定DNS

    Linux本身只能通过/etc/resolv.conf设置全系统的DNS.这里有一种给特定进程单独设置DNS的方法,通过免root的mount namespace达成.使用脚本只需要一条简洁的命令就可 ...

  10. ORACLE结构化查询语句