首页 技术 正文
技术 2022年11月12日
0 收藏 804 点赞 3,778 浏览 727 个字

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标签中存在nameid属性,这两个属性主要是用来和img标签建立联系,让img标签能够和我们创建的图像热区相互结合。

area标签:

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

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

rect 矩形
circle 圆形
poly 多边形

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

rect -> 对应左上角和右下角的坐标
circle -> 对应圆心坐标和半径长度
poly -> 对应每一个定点的坐标

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

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

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,132
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,295