如何实现点击背景图片指定区域跳转至其他网站？

在HTML里实现这个需求，最常用的是两种原生方案，不需要额外JS，下面分别说明：

方案一：使用Image Map（图片映射） #

这是HTML原生的图片热点区域解决方案，不管是直接插入的图片还是作为背景图的场景都适用。

步骤： #

1. 获取区域坐标：先确定你要设置点击区域的坐标（比如矩形的左上角/右下角、圆形的圆心和半径），可以用PS、浏览器开发者工具，或者在线图片坐标工具来获取。
2. 编写代码：

<!-- 若图片是作为容器背景，可将img元素设为绝对定位覆盖容器，配合opacity:0隐藏，不影响背景显示 -->
<img src="你的背景图片路径" alt="页面背景图" usemap="#bgImageMap" style="position: absolute; top:0; left:0; width:100%; height:100%; opacity:0;">

<!-- 定义映射区域 -->
<map name="bgImageMap">
  <!-- 矩形区域：coords格式为 左上角x,左上角y,右下角x,右下角y -->
  <area shape="rect" coords="150,80,300,220" href="https://目标网站1.com" alt="点击跳转至网站1">
  <!-- 圆形区域：coords格式为 圆心x,圆心y,半径 -->
  <area shape="circle" coords="450,150,70" href="https://目标网站2.com" alt="点击跳转至网站2">
  <!-- 多边形区域：coords为多个顶点的x,y坐标，依次用逗号分隔 -->
  <area shape="poly" coords="600,80,700,220,500,220" href="https://目标网站3.com" alt="点击跳转至网站3">
</map>

关键说明： #

• usemap="#bgImageMap"：将img元素和name为bgImageMap的映射绑定，确保点击区域生效
• <area>的shape属性支持rect（矩形）、circle（圆形）、poly（多边形）三种形状
• 如果图片是响应式缩放的，可能需要用JS动态调整coords的数值，或者使用百分比坐标（部分现代浏览器支持）

方案二：绝对定位链接（适合背景图容器） #

如果你的图片是作为容器的background-image，可以直接在容器内放置绝对定位的<a>标签，覆盖到需要点击的区域：

<!-- 背景图容器：设置相对定位，确保内部绝对定位元素以它为基准 -->
<div style="position: relative; width: 100vw; height: 80vh; background-image: url('你的背景图片路径'); background-size: cover;">
  <!-- 矩形点击区域：通过top/left/width/height定位到对应位置 -->
  <a href="https://目标网站1.com" style="position: absolute; top: 80px; left: 150px; width: 150px; height: 140px; opacity: 0;"></a>
  <!-- 圆形区域用border-radius实现圆形点击范围 -->
  <a href="https://目标网站2.com" style="position: absolute; top: 80px; left: 450px; width: 140px; height: 140px; border-radius: 50%; opacity: 0;"></a>
</div>

关键说明： #

• opacity: 0让链接不可见但可点击，调试时可以临时设为0.2并加背景色，方便调整位置
• 容器的宽高要和背景图的显示尺寸匹配，避免区域错位
• 响应式场景下，可以用百分比单位设置top/left/width/height，适配不同屏幕

注意事项 #

• 不管用哪种方案，都要给可点击元素加上alt属性，提升屏幕阅读器的可访问性
• 测试时要在不同设备上验证点击区域的准确性，尤其是响应式布局场景

内容的提问来源于stack exchange，提问作者OskarPion