前端map标签(创建热点区域或是点击图片指定区域跳转对应链接))
2023-12-27 20:37:26
前言
- 点击整张图片的某一部分,可以实现自定义跳转或者一些事件
利用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
快速定位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
文章来源:https://blog.csdn.net/u014582342/article/details/135252749
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!