一张图片，根据区域，跳转不同链接

最新推荐文章于 2025-08-04 10:52:56 发布

swallow_杨

最新推荐文章于 2025-08-04 10:52:56 发布

阅读量8.9k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/swallow_y/article/details/97135401

本文介绍了两种前端方法实现点击图片不同区域跳转到不同链接。第一种方法涉及CSS定位配合使用，第二种方法利用a标签的定位属性。需要注意CSS定位的精确调整，以及map单位限制为px。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我使用到了两种方法、

第一种方法，使用配合使用（定位可能没调好，代码可以参考）

参考网址
注意，map只能使用px作为单位，所以，自己看着办，好好选择。
例子：

 <img src="https://i-blog.csdnimg.cn/blog_migrate/68b0df545997f9729065e3109736a585.png"  usemap='demomap' alt='demomap'/>
 <map id='demomap' name='demomap'>
   //shape指的是所选区域的形状，coords指的是区域左上角和右下角的坐标
  <area shape="rect" coords="0,0,279,303" href ="http://www.baidu.com" alt="baidu" />
  <area shape="rect" coords="279,0,600,303" href ="https://www.youkuaiyun.com/" alt="csdn" />
</map>

第二种方法，使用定位，a标签跳转(定位可能没调好，代码可以参考)

例子：

 <img src="https://i-blog.csdnimg.cn/blog_migrate/68b0df545997f9729065e3109736a585.png"/>
 <div style="position: absolute; width: 25vw;height: 13vh; top: 0vh; left:7vw; background-image: url(about:blank);background-repeat: no-repeat;background-position: center center;">
   <a target="_blank" href="https://www.facebook.com" style="width:100%;  height: 100%; display: block;"></a>
 </div> 
 <div style="position: absolute; width: 25vw;height: 13vh; top:0vh; left:37vw; background-image: url(about:blank);background-repeat: no-repeat;background-position: center center;">
     <a target="_blank" href="https://www.baidu.com" style="width:100%;  height: 100%; display: block;"></a>
 </div>