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# jobject 的数据结构的解析：

    c# jobject 数据结构的解析:首先下载Newtonsoft.Json,增加引用using Newtonsoft.Json.Linq;把jobject的内容提取出来,Jobject的内容格式如下 ...

  2. 林业资源遥感航拍监测GIS系统

    航拍监测.遥感监测在林业有害生物(松材线虫病监测).森林防火监测.森林滥砍滥伐.林地侵占.林地违规开发监测等方面应用,将大大提升林业资源监测水平, 针对已有森林资源大量流失,滥砍滥伐现象普遍存在的事实 ...

  3. Android视频录制从不入门到入门系列教程(三)————视频方向

    运行Android视频录制从不入门到入门系列教程(二)————显示视频图像中的Demo后,我们应该能发现视频的方向是错误的. 由于Android中,Camera给我们的视频图片的原始方向是下图这个样子 ...

  4. linux 大冒险

    本来想搞一个nas系统,结果上来linux的贼船. 本来是看上了deepin深度linux,结果看到排名第一的manjaro 就忍不住手.通过hyper-v虚拟机安装,发现这个所谓的第一不知道第一在哪 ...

  5. simulink创建简单模型

    创建简单模型 您可以使用 Simulink® 对系统建模,然后仿真该系统的动态行为.Simulink 允许您创建模块图,图中的各个连接模块代表系统的各个部分,信号代表这些模块之间的输入/输出关系.Si ...

  6. 无限极分类（adjacency list）的三种方式（迭代、递归、引用）

    一般的分类树状结构有两种方式: 一种是adjacency list,也就是是id,parent id这中形式. 另一种是nested set,即左右值的形式. 左右值形式查询起来比较高效,无需递归等, ...

  7. Navicat for MySQL破解版安装

    https://pan.baidu.com/s/1OfFPvqrTqbUAC_Eqq2i0KA 提取码:jgep 点击第一个应用程序一路安装即可. 安装成功之后,再点击第二个应用程序PatchNavi ...

  8. 【错误笔记】MyBatis SQLException: 无效的列类型: 1111

    问题描述: org.springframework.jdbc.UncategorizedSQLException: Error setting null for parameter #1 with J ...

  9. PYTHON定义函数制作简单登录程序（详细）

    环境:python3.* 结构:   dict_name = {} #定义一个字典,后面用到 def newuser(): #定义注册函数 prompt1='login desired:' while ...

  10. modbus串口通讯C#

    简介 公司给的一个小任务,这篇文章进行详细讲解 题目: modbus串口通讯 主要内容如下: 1.实现使用modbus通讯规约的测试软件: 2.具有通信超时功能: 3.分主站从站,并能编辑报文.生成报 ...