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) 行高的作用: 设置文字垂直方向中有距离 文字垂直居中(行高=容器的高度) 影响行高的因素: 文字大小可以改变行高 ...
随机推荐
- android 实例-弱引用示例 Handler正确使用方法
实际问题 android 习惯性问题:在使用handler的时候喜欢使用内部类形式. private final Handler handler = new Handler(){ @Override ...
- java实现几种常用排序:选择排序
一.选择排序介绍 选择排序,顾名思义就是用逐个选择的方式来进行排序,逐个选择出数组中的最大(或最小)的元素,直到选择至最后一个元素.此时数组完成了排序. 二.选择排序原理分析 三.选择排序代码实现 / ...
- 解决oracle 物化视图刷新失败
oracle 物化视图刷新失败可能原因: 1.视图未建立物化视图日志 2.基表为授权给用户 1.物化视图语法 create materialized view [view_name] refresh ...
- RSA签名、验签、加密、解密
最近在做一个项目,与一个支付渠道进行连接进行充值,为了安全,每个接口访问时,都要先登陆(调用登陆接口),拿到一个sessionKey,后续业务接口内容用它来进行3DES加密处理.而登陆需要用到RSA进 ...
- web站点放在nginx其他目录下
web站点放在nginx其他目录下 .查看主配置文件 [root@bogon mysql]# cat /etc/nginx/nginx.conf user root root; worker_proc ...
- SSO单点登录统一身份认证系统
什么是单点登录 简单点说就是公司有A,B两个系统,我登录了A系统之后再跳转到B系统可以直接访问,而不需要再次登录B系统. 几种常见的单点登录实现方式 在讲解单点登录之前先讲解几个基本的概念: Cook ...
- (转)Dubbo + Zookeeper入门初探
一.搭建java和tomcat环境 二.搭建zookeeper 三.搭建dubbo监控中心 四.配置项目 4.1 服务提供方代码 4.2 服务使用方代码 五.测试 2018年2月15日,阿里巴巴的du ...
- OpenStack组件——Neutron网络服务(1)
1.neutron 介绍: 1)Neutron 概述 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是在多租户场景里,用户随时都可能需要 ...
- 【C/C++语言】指针常量与常量指针的区别
三个名词虽然非常绕嘴,不过说的非常准确.用中国话的语义分析就可以很方便地把三个概念区分开. 一) 常量指针. 常量是形容词,指针是名词,以指针为中心的一个偏正结构短语.这样看,常量指针本质是指针,常量 ...
- SQL 批量添加的语法
.--添加一条记录 . insert into tableName(col1,col2,col3) values (val1,val2,val3) .--添加多条记录 . insert into ta ...