一、使用方法:

因为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. js实现图片上传到服务器和回显

    关于js实现图片的上传和回显,曾经用户的代码粘在这里: 样式:这样写样式的道理是给<input>标签的父级设置一个背景图,就是‘+’那个背景图,然后把<input>的宽高设置得 ...

  2. oracle查看表空间的大小及使用情况sql语句

    --------------------------tablespace------------------------------------------------ 1.//查看表空间的名称及大小 ...

  3. mysql密码忘记更改

    忘记mysql的密码是一件不好的事,通常我们会把密码记住,或者是存在文档中,避免忘记,如果忘记了密码可以参照下方方法来更改,这个操作需要重启mysql. 首先我们在my.cnf文件中的[mysqld] ...

  4. C# 防火墙操作之开启与关闭

    通过代码操作防火墙的方式有两种:一是代码操作修改注册表启用或关闭防火墙:二是直接操作防火墙对象来启用或关闭防火墙.不论哪一种方式,都需要使用管理员权限,所以操作前需要判断程序是否具有管理员权限. 1. ...

  5. LC 774. Minimize Max Distance to Gas Station 【lock,hard】

    On a horizontal number line, we have gas stations at positions stations[0], stations[1], ..., statio ...

  6. 小D课堂 - 新版本微服务springcloud+Docker教程_3-02CAP理论知识

    笔记 2.分布式应用知识CAP理论知识     简介:讲解分布式核心知识CAP理论 CAP定理:             指的是在一个分布式系统中,Consistency(一致性). Availabi ...

  7. 2019.11.07【每天学点SAP小知识】Day2 - ABAP 7.40新语法 - 内表

    今天学习一下内表的表达式在ABAP 7.4之后的语法: SELECT * FROM mara INTO TABLE @DATA(gt_mara)UP TO 10 ROWS. DATA gt_mara_ ...

  8. js 闭包解决方案

    相比很多人都遇见过这样的情况: 给一个ul的所有li绑定行为,在点击时获取其index. 假设结构如下: <body> <ul> <li>0</li> ...

  9. Git命令与介绍

    一. Git[命令与介绍] 1. 作用 可以用于个的项目版本控制和管理 目前多用于团队间的多人协作项目开发 2. 安装 l 安装包路径 l 安装 后的路径: 3. 工作流程 (1) 创建项目目录 在路 ...

  10. amh 操作

    挂在分区到/home 迁移数据库/usr/local/mysql/data 到/home/data目录 504 卡死 进入kangle后台,选扩展,再选中扩展里的命令选项,修改PHP-NTS的协议为f ...