map+area标签
- 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标签的更多相关文章
- HTML图片热区 map area 标签
实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...
- 详细解读html中的Map,area标签
一.定义 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 二.使用 <!--定义一个图像 他的边框为0(border) usemap(指定该图像被用作图像地图 ...
- map area 标签的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)
例子: <img src="planets.gif" width="145" height="126" alt="Plane ...
- map,area标签
map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...
- HTML中的map和area标签
1. 标签介绍: (1)map标签: 该标签是指图片的映射,也就是说一张可以点击的图片的映射: 属性介绍: <1> id: <img>中的 usemap 属性可引用 <m ...
- html中map标签和area标签的应用
map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档. 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name ...
- html中map标签和area标签的应用(总结)
html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...
- HTML <area> 标签区域map标签
1.距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)) <area shape="rect" coords="x1,y1,x2,y2" ...
随机推荐
- ABP VNext从单体切换到微服务
注:此处的微服务只考虑服务部分,不考虑内外层网关.认证等. ABP VNext从单体切换到微服务,提供了相当大的便利性,对于各模块内部不要做任何调整,仅需要调整承载体即可. ABP can help ...
- burp suite 之 Scanner(漏洞扫描)
Scanner选项:是一个进行自动发现 web 应用程序的安全漏洞的工具. 将抓取的包 通过选项卡发送至 Scanner下的Scan queue 首先来介绍 Scanner 下的 lssue acti ...
- 适用于 deno 的多版本管理工具 dvm 发布
不知不觉中,deno 已经默默的发布了 3 个版本了: 0.1.0 0.1.1 0.1.2 昨晚通宵做了一个 deno 多版本的管理工具: dvm. github 地址: https://github ...
- Linux软件管理常用命令和选项
rpm /var/lib/rpm:数据库目录 -ivh x:安装软件包x -Uvh x:升级或安装软件包x,如果没有安装x的旧版本,则安装x,否则删除x的旧版本后再安装x. -Fvh x:升级软件包x ...
- 使用类模板的C++线性表实现(数组方式)
main.h #ifndef _MAIN_H_ #define _MAIN_H_ #include <iostream> #include <exception> #inclu ...
- 《C++primerplus》第12章练习题
做一下倒数两题,都是在队列模拟的程序基础上做点修改测试. 5.找出平均等候时间为1分钟时,每小时到达的客户数为多少(试验时间不少于100小时). 指定队伍最大长度10人,模拟100小时.粗略估计答案在 ...
- 为Facebook messenger平台开发聊天机器人
介绍 在电子商务网上商店发明之前,我们总是有机会与销售代表或分销商在选择商品或服务时交谈.在进入数字世界后,这个领域变得沉默.这样对顾客方便吗?我认为不是.向销售代表或经销商询问他们想要的产品或服务是 ...
- 解决mvn clean install的报错The packaging for this project did not assign a file to the build artifact
解决mvn clean install的报错The packaging for this project did not assign a file to the build artifact
- GUI版本的emacs
概要 emacs 配置 X11 配置 输入法配置 spacemacs 中的配置 fcitx 汉字显示方块的问题 总结 优势 劣势 概要 之前一直使用 terminal 版本的 emacs, 性能和显示 ...
- [Docker]linux异常关机,docker镜像丢失
在运行中的docker容器遇到意外情况,可能会自动终止运行,例如磁盘空间不足. 解决办法: 找到/var/lib/docker/containers文件夹下的所有容器ID 执行命令,查看容器信息 ,找 ...