前言
点击整张图片的某一部分,可以实现自定义跳转或者一些事件
利用img和map和area标签实现
先来看下实现
https://www.w3cschool.cn/tryrun/showhtml/tryhtml_areamap
img
使用usemap属性和map标签进行关联 map标签
https://www.w3cschool.cn/htmltags/tag-map.html area标签
https://www.w3cschool.cn/htmltags/tag-area.htmlHTML 元素 在图片上定义一个热点区域,可以关联一个超链接。元素仅在
给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性。
对于矩形或长方形,这个 coords 值为两个 X,Y 对:左上、右下。
对于圆形,这个值是 x,y,r,这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值。
对于多边和多边形,这个值是用 x,y 对表示的多边形的每一个点:x1,y1,x2,y2,x3,y3 等等。
HTML4 里,值可能是像素数量或者百分比,区别是不是有 % 出现; HTML5 里,只可能是像素的数量。
值有:
default
rect
circle
poly
快速定位coords
工具下载
https://www.123pan.com/s/9biA-qMzHh.html 提取码:HErl 工具怎么使用就直接COPY下面这位人的了
https://www.cnblogs.com/Jener/p/5977706.html 非动图可以看
https://blog.csdn.net/weixin_58346650/article/details/124348764