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

news2024/10/7 8:31:32

前言

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

利用img和map和area标签实现

先来看下实现
- https://www.w3cschool.cn/tryrun/showhtml/tryhtml_areamap

<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标签
- https://www.w3cschool.cn/htmltags/tag-map.html

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