一、使用方法:

因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,usemap属性接收二者之一的值,所以通常name和id属性二者都写,值相同),并配合area标签进行使用。

例如:

1、我们先插入一张图片,并与map连接好

2、然后用area设置区域

其中的属性:shape是形状,coords是坐标。

得到的效果图是:

点击蓝色线圈位置就能跳转链接的网址。

形状的属性circle是圆形;坐标的前两位数是圆心的位置,后一位是半径。

形状的属性rectangle是矩形;坐标前两位数是一个角的位置,后两位是对角的位置。

形状的属性poly是多边形;坐标是每一对数就是一个角的位置。

html/css中map和area的应用的更多相关文章

  1. html中map标签和area标签的应用(总结)

    html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...

  2. 解决:Map的area属性标签鼠标Hover可以给area加背景

    css的area标签是不支持hover的,只有a标签才支持.li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成.首先讲jQuery对应的事件:1.m ...

  3. map,area标签

    map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...

  4. CSS中的盒模型

    CSS的盒模型描述了一些长方形盒子,这些长方形盒子被用来表示文档树中的元素,并根据视觉格式化模型进行定位. 1. 盒子的尺寸 每个盒子都有一个content区域(比如文本.图片等)和可选的包围cont ...

  5. css中的线及vertical-align

    行内元素格式化顺序: 相关概念:  leading(行间距):指填充在两行文字间的铅条,等于line-height 和 font-size之差,其中一半leading加到文字上方,另一半leading ...

  6. scss牛刀小试:解决css中适配浏览器前缀问题

    在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的I ...

  7. 问答:怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式?

    好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...

  8. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  9. CSS(中)篇

    1.1行高 行高属于文字的属性 行高=文字大小+上间距+下间距(默认行高=18px) 行高的作用: 设置文字垂直方向中有距离 文字垂直居中(行高=容器的高度) 影响行高的因素: 文字大小可以改变行高 ...

随机推荐

  1. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  2. redis数据类型为key的常用命令

    redis默认自带16个库select 7切换到redis第8个数据库dbsize查看reids有几个keykeys *查看所有k,vclear清空控制台FLUSHDB清空当前数据库的kvFLUSHA ...

  3. 3.MapReduce原理和Yarn

    1.MapReduce原理 2.MapReduce执行时间 3.MapReduce开发 4.Yarn

  4. 一、Vue基础之常用方法

    一.JSON.parse() 与 JSON.stringify() 1.JSON.parse() :是从一个字符串中解析出 json 对象 //定义一个字符串 var data='{"nam ...

  5. OpenCV学习笔记(13)——轮廓特征

    查找轮廓的不同特征,例如面积,周长,重心,边界等 1.矩 图像的矩可以帮助我们计算图像的质心,面积等. 函数cv2.momen()会将计算得到的矩以一个字典的形式返回, 我们的测试图像如下: 例程如下 ...

  6. 使用 certbot 自动给 nginx 加上 https

    概述 目前,Let's Encrypt 可以算是最好用的 https 证书申请网站了吧.而 certbot 可以算是它的客户端,能够很方便的自动生成 https 证书.我把自己的使用经历记录下来,供以 ...

  7. springboot集成springcloud,启动时报错java.lang.AbstractMethodError: null

    出现这个问题是springboot和springcloud的版本不匹配. 我此处使用了springboot 2.0.4.RELEASE,springcloud 使用了Finchley.SR2. 修改方 ...

  8. 修改node节点名称

    https://my.oschina.net/u/3390908/blog/1649764 .查看原来node [root@lab2 ~]# kubectl get no NAME STATUS RO ...

  9. docker上传私有仓库报错

    docker 1.17 版本搭建私有仓库,上传镜像报错:server gave HTTP response to HTTPS client” 系统环境:centos7docker版本:1.17(注意版 ...

  10. 【.NET】关于.NET前后台提示框的那点事

    前言 关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容 客户:需求方: 小白:实现方(全权负责 ...