css 图像热区

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>

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

1153905-20190421224222958-677211028.png

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

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

转载于:https://www.cnblogs.com/liujunhang/p/10747545.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值