html/css中map和area的应用
一、使用方法:
因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,usemap属性接收二者之一的值,所以通常name和id属性二者都写,值相同),并配合area标签进行使用。
例如:
1、我们先插入一张图片,并与map连接好

2、然后用area设置区域

其中的属性:shape是形状,coords是坐标。
得到的效果图是:

点击蓝色线圈位置就能跳转链接的网址。
形状的属性circle是圆形;坐标的前两位数是圆心的位置,后一位是半径。
html/css中map和area的应用的更多相关文章
- html中map标签和area标签的应用(总结)
html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...
- 解决:Map的area属性标签鼠标Hover可以给area加背景
css的area标签是不支持hover的,只有a标签才支持.li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成.首先讲jQuery对应的事件:1.m ...
- map,area标签
map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...
- CSS中的盒模型
CSS的盒模型描述了一些长方形盒子,这些长方形盒子被用来表示文档树中的元素,并根据视觉格式化模型进行定位. 1. 盒子的尺寸 每个盒子都有一个content区域(比如文本.图片等)和可选的包围cont ...
- css中的线及vertical-align
行内元素格式化顺序: 相关概念: leading(行间距):指填充在两行文字间的铅条,等于line-height 和 font-size之差,其中一半leading加到文字上方,另一半leading ...
- scss牛刀小试:解决css中适配浏览器前缀问题
在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的I ...
- 问答:怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式?
好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- CSS(中)篇
1.1行高 行高属于文字的属性 行高=文字大小+上间距+下间距(默认行高=18px) 行高的作用: 设置文字垂直方向中有距离 文字垂直居中(行高=容器的高度) 影响行高的因素: 文字大小可以改变行高 ...
随机推荐
- .net 查壳工具
请问大神.NET查壳工具都有哪些? 已知的有DotNet Id 除了这个还有别的吗?脱MAXTOCODE发现是双壳.脱掉第一层还有一层,DotNet Id检测没壳了,但是反编译还是加密状态. 用 ...
- 获取客户端ip(包含中间反向代理)
/** * 根据request获取用户的IP地址 * @param request * @return */ public static String getRemoteHost(HttpServle ...
- PHP JQurey
JQuery是用JS编写的程序,使用起来比JS更为简单,使用前需引入一个JQurey文件,下面为JQurey语法 <script type="text/javascript" ...
- 设置placeholder 颜色
::-webkit-input-placeholder { /* WebKit browsers */ color: rgb(100, 193, 173); } :-moz-placeholder { ...
- 2019-8-13未命名文件 sdfsdfsdfsdfsdfsdf
2019-8-13未命名文件 sdfsdfsdfsdfsdfsdf 新建模板小书匠 欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 小书匠主按钮>模板 里的模板管理来改变新建文章 ...
- CA证书申请+IIS配置HTTPS+默认访问https路径
引用别人博文内容:https://www.cnblogs.com/lichunting/p/9274422.html 一.CA证书申请 (一). 新StartSSL注册帐号 1. StartSS ...
- CentOS7.x 更换 yum 镜像
163 镜像地址 http://mirrors.163.com/.help/centos.html 163 镜像是国内最好的yum 镜像之一,这里使用的是163的yum 镜像备份 镜像 mv /etc ...
- Django auth 用户验证
## Django本身内建这样的功能,admin管理页面就使用了这样的验证机制,admin管理页面就有Groups和Users选项 ## 需要在models.py中导入 from django.con ...
- PHP架构剖析
一:PHP是什么 PHP("PHP: Hypertext Preprocessor",超文本预处理器的字母缩写)是一种被广泛应用的开放源代码的多用途脚本语言,它可嵌入到 HTML中 ...
- jQuery I
jQuery 两大特点: 链式编程:比如.show()和.html()可以连写成.show().html(). 隐式迭代:隐式对应的是显式.隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再 ...