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) 行高的作用: 设置文字垂直方向中有距离 文字垂直居中(行高=容器的高度) 影响行高的因素: 文字大小可以改变行高 ...
随机推荐
- websphere部署不能发布war文件,提示“配置库中已存在应用程序
碰上这种问题, 要是全删除与war相关配置文件,要么按网上教程,一点点搜下面的文件中包含的相关文件: $WAS_HOME/profiles/AppSrv01/config/cells/...cell/ ...
- 七十五:flask.Restful之Restful.API介绍
restful api是用于在前端与后台进行通信的一套规范,使用这个规范可以让前后端开发变得更加轻松 协议:http或者https 数据传输格式:使用json url链接:url链接中不能有动词(/g ...
- 数据库高级数据库学习--上机练习7(Transact-SQL 函数定义和调用)
上机练习7 在Transact SQL中,有一类特殊的自定义函数,其返回值为一张表,该类自定义函数被称作内嵌(联)表值函数,其基本语句格式如下: CREATE FUNCTION函数名称[( {@参数名 ...
- C++类中的一些细节(重载、重写、覆盖、隐藏,构造函数、析构函数、拷贝构造函数、赋值函数在继承时的一些问题)
1 函数的重载.重写(重定义).函数覆盖及隐藏 其实函数重载与函数重写.函数覆盖和函数隐藏不是一个层面上的概念.前者是同一个类内,或者同一个函数作用域内,同名不同参数列表的函数之间的关系.而后三者是基 ...
- Python3 Selenium自动化web测试 ==> 第三节 常用WebDriver API使用示例上(24个API)
前置步骤: 安装selenium,chrome驱动,Python3.6 学习目的: 常见API的使用 涉及的API: step1: 访问一个网址 step2: 网页的前进和后退 step3: 刷新当前 ...
- Pandas使用细则
本文介绍pandas的使用,总结了我在机器学习过程中常使用到的一些方法等. #pandas学习 import pandas as pd import numpy as np import seabor ...
- 【DSP开发】TI第二代KeyStone SoC诠释德仪的“云”态度
11月14日,期盼已久的德州仪器基于ARM Cortex-A15的产品终于新鲜出炉.伴随着TIKeyStone II多核 SoC系列产品的发布,结合了ARM Cortex-A15 处理器.C66x D ...
- 【Linux开发】linux设备驱动归纳总结(三):2.字符型设备的操作open、close、read、write
linux设备驱动归纳总结(三):2.字符型设备的操作open.close.read.write 一.文件操作结构体file_operations 继续上次没讲完的问题,文件操作结构体到底是什么东西, ...
- Java架构师 -- 知识库
1,CSDN知识库: http://lib.csdn.net/base/architecture 2,淘宝
- PTA(Basic Level)1053.住房空置率
在不打扰居民的前提下,统计住房空置率的一种方法是根据每户用电量的连续变化规律进行判断.判断方法如下: 在观察期内,若存在超过一半的日子用电量低于某给定的阈值 e,则该住房为"可能空置&quo ...