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. flutter,跟着官网一步一步创建第一个flutter应用

    创建第一个flutter 编辑器: vscode 一.创建flutter项目 1.启动vscode 2.按ctrl+shift+p打开命令面板 3.输入flutter 选择Flutter: New P ...

  2. Windows无法安装到GPT格式磁盘的根本解决办法 - 初学者系列 - 学习者系列文章

    上次在MSDN系统QQ群里有朋友问到在安装操作系统的时候有个问题:Windows无法安装到GPT格式磁盘,见图: 我在这里说下,使用网上方法的都是小白,就是说网上那些都是小白.下面介绍如何正确安装操作 ...

  3. Linux里面的压缩和解压类指令

    gzip/gunzip 指令 ( .gz  不能压缩目录) gzip 用于压缩文件, gunzip 用于解压的 . gzip gzip命令用来压缩文件.gzip是个使用广泛的压缩程序,文件经它压缩过后 ...

  4. Centos6.6x系统与unbutu18.04系统升级ssh到8.3版本

    Centos6.6升级ssh5.3版本到ssh8.3版本 下载所需要的源码包: ]#wget https://files-cdn.cnblogs.com/files/luckjinyan/zlib-1 ...

  5. MySQL的8小时连接超时时间，导致系统过夜即崩溃，报错Could not roll back Hibernate transaction

    2014年3月开始给单位开发<机关规范化管理网络平台>,10月底成功上线运行,但是存在一个bug: 部署环境: apache tomcat 6.0.41 + mysql5.5 + jbpm ...

  6. 编写自己的Arduino库

    参考及来源超给力啊: https://www.cnblogs.com/lulipro/p/6090407.html https://www.cnblogs.com/lulipro/p/6090407. ...

  7. C++字符串的输入输出整理

    最近在跟一门北大C++程序设计的慕课,openjudge上做到一道题,要求定义一种能够输入输出学生姓名,年龄,学号和学年成绩的类.比较特别的是输入的形式是以逗号隔开的一长串字符串. 我用的方法通过是通 ...

  8. JavaScript利用函数反转数组

    要求: 给定一数组,将其元素倒序排列并输出. 代码实现: // 利用函数翻转任意数组 reverse 翻转 function reverse(arr) { var newArr = []; for ( ...

  9. JVM笔记五-堆区

    JVM笔记五-堆区 在JVM中,堆区是重中之重.通过前面文章的学习,我们知道了,栈区是不会有垃圾回收的,所以,经常说的垃圾回收,其实就是回收的是堆区的数据.在这里,我们将会看到传说中的,新生代.老年代 ...

  10. Request对象基础应用实例代码一

    输入用户名:<br><input type="text" name="yhm"><br><br>输入密码:< ...