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
。