前端 图片热区的使用

最近学习了图片热区,相信大家对热区的定位还存在疑惑,下面我将简单介绍一下它的使用

  1. 首先贴出它的代码
//热区
<img src="unite.jpg" usemap="#mymap">
  <map name="mymap" id="mymap">
    <area shape="circle" coords="75,75,75" alt="圆形热区" href="">
    <area shape="rect" coords="10,160,150,280" alt="" href="矩形热区">
    <area shape="poly" coords="25,20,112,20,112,50,25,50" alt="多边形热区" href="">
  </map>
  1. 可以通过shape=" "属性对热区形状进行设定
  2. coords=" "给出其坐标位置
    顶点的坐标顺序为顺时针选取
    X,Y坐标原点为图片左上角
    坐标长度单位为px,坐标点具体看图片大小

(圆形:圆心坐标位置,以及半径)需三个值
eg:coords=“75,75,75”

(矩形:对角坐标)需四个值
eg:coords=“10,160,150,280”

(多边形:所有顶点的坐标)需2n个值
eg:正方形 coords=“25,20,112,20,112,50,25,50”
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值