CSS图像热区

在img标签当中，存在一个属性usemap属性，用来和map标签进行绑定，从而实现图像热区。所谓的图像热区，其实指的是在图像中插入一个连接，当用户点击图像的指定区域后就会进行页面跳转。

demo:

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8">

	<title>图像热区</title>

</head>

<body>

	<img src="photo3.jpg" usemap="#toLink">

	<map name="toLink" id="toLink">

		<area shape="rect" coords="0,0,300,300" href="http://www.baidu.com" title="百度一下,你就知道">

	</map>

</body>

</html>

当我们点击图片当中相应位置之后，效果如下：

在上面的效果图当中，在我们点击之后出现的蓝色区域就是图像热区的区域，只要我们在蓝色区域内点击，都会跳转到预先设置好的网址去。

map标签的name和id属性:

在map标签中存在name和id属性，这两个属性主要是用来和img标签建立联系，让img标签能够和我们创建的图像热区相互结合。

area标签:

area标签里面存在几个非常重要的属性。

1、shape属性表示热区的形状。

rect 矩形

circle 圆形

poly 多边形

2、coords表示形状关键点的坐标。

rect -> 对应左上角和右下角的坐标

circle -> 对应圆心坐标和半径长度

poly -> 对应每一个定点的坐标

3、href表示热区对应的连接地址。

既可以跳转本地文件，也可以跳转其他连接。

4、target 表示设置在何处打开href属性指定的url。

css 图像热区的更多相关文章

  1. HTML基础篇之图像热区补充一下图片相对地址的定义

    HTML5课堂笔记理解2 上次说到图片相对地址的定义,举例了4中情形的下的不同目录的图片书写方法补充一个如果你要的图片目录跟上面四种都不一样话可以用以下属性值尝试 ./            当前目录 ...

  2. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  3. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...

  4. CSS 图像

    CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...

  5. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

  6. CSS 图像透明/不透明

    CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 一.示例一:创建一个透明图像 CSS3中属性的透明度是 opacity. ...

  7. css图像拼合技术（精灵图）

    CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合. 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合实例 有 ...

  8. CSS：CSS 图像拼合技术

    ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...

  9. CSS：CSS 图像透明/不透明

    ylbtech-CSS:CSS 图像透明/不透明 1.返回顶部 1. CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 更多 ...

随机推荐

  1. C#根据屏幕分辨率改变图片尺寸

    最近工作中遇到一个问题,就是需要将程序文件夹中的图片根据此时电脑屏幕的分辨率来重新改变图片尺寸 以下为代码实现过程: 1.获取文件夹中的图片,此文件夹名为exe程序同目录下 //读取文件夹中文件 Di ...

  2. Java 在PDF中添加水印——文本/图片水印

    水印是一种十分常用的防伪手段,常用于各种文档.资料等.常见的水印,包括文字类型的水印.图片或logo类型的水印.以下Java示例,将分别使用insertTextWatermark(PdfPageBas ...

  3. 驰骋开源的asp.net工作流程引擎java工作流 2015 正文 驰骋工作流引擎ccflow6的功能列表

    关键词: 驰骋工作流引擎   ccflow的功能列表   工作流功能列表  表单引擎功能列表 我们工作流引擎ccflow6重构之后对功能做了一些调整,要想快速了解ccbpm的功能,可以以下面列表为准 ...

  4. 数据结构：关键路径，利用DFS遍历每一条关键路径JAVA语言实现

    这是我们学校做的数据结构课设,要求分别输出关键路径,我查遍资料java版的只能找到关键路径,但是无法分别输出关键路径 c++有可以分别输出的,所以在明白思想后自己写了一个java版的 函数带有输入函数 ...

  5. 【学习记录】第一章 数据库设计-《SQL Server数据库设计和开发基础篇视频课程》

    一.课程笔记 1.1  软件开发周期 (1)需求分析阶段 分析客户的业务和数据处理需求. (2)概要设计阶段 设计数据库的E-R模型图,确认需求信息的正确和完整. /* E-R图:实体-关系图(Ent ...

  6. Andriod studio 打包aar

    因为项目不同,有些公用库而且还是c++的,还有一些带资源的,简单的复制遇到库升级又是一轮配置,编译成aar则解决这些麻烦. 但是默认andriod studio的make moudle只生成debug ...

  7. 数据库【mongodb篇】基本命令学习笔记

    MongoDB基本命令用 MongoDB基本命令用   成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs ...

  8. centos 网卡状态

    由于ifconfig命令没法看到网卡的一些状态, 以下有5种方法查看网卡状态,是否连通网线 1)# dmesg | grep eth.....e1000: eth0 NIC Link is Up 10 ...

  9. e2e测试框架之Cypress

    谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...

  10. handsontable的基础应用

    handsontable是一款页面端的表格式交互插件,可以通过她加载显示表格内容,能够支持合并项.统计.行列拖动等. 同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作. 我在项目 ...