前端map标签(创建热点区域或是点击图片指定区域跳转对应链接))

前言

  • 点击整张图片的某一部分,可以实现自定义跳转或者一些事件

利用img和map和area标签实现

html 复制代码
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
  • img

    • 使用usemap属性和map标签进行关联
  • map标签

  • area标签

    • https://www.w3cschool.cn/htmltags/tag-area.html

    • HTML <area> 元素 在图片上定义一个热点区域,可以关联一个超链接。<area>元素仅在<map>元素内部使用。

    • 然后里面的coords标注位置信息

      coords
      给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性。
      对于矩形或长方形,这个 coords 值为两个 X,Y 对:左上、右下。
      对于圆形,这个值是 x,y,r,这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值。
      对于多边和多边形,这个值是用 x,y 对表示的多边形的每一个点:x1,y1,x2,y2,x3,y3 等等。
      HTML4 里,值可能是像素数量或者百分比,区别是不是有 % 出现; HTML5 里,只可能是像素的数量。
      值有:
      default
      rect
      circle
      poly

快速定位coords

相关推荐
0wioiw08 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖11 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
小飞悟35 分钟前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖38 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端