【html】点击图片内链接进行跳转

最新推荐文章于 2024-08-15 13:19:00 发布

毛小兔

最新推荐文章于 2024-08-15 13:19:00 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

文章标签： html html5

本文链接：https://blog.youkuaiyun.com/maoziyang1996/article/details/106229845

这篇博客介绍了如何在HTML中实现点击图片不同位置跳转到不同网址。针对仅PC端和同时兼容PC、手机端的场景，提供了使用coords属性及图片切割结合href链接的两种方法。

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

博主因为工作中遇到，有些UI图片里有多个链接，要求用户可以点击图片内相关的链接进行跳转。

比如：以下是一张图片（非页面），但是要求点击图片不同位置，跳转到不同网址：

方法：

1.如果仅在PC端展示页面：

可以使用coords属性，具体参考网址：

HTML <a> 标签的 coords 属性

2.如果要求同时在PC端和手机端做展示：

可以对图片进行切割：（就是将一个大的图片拆成多个小图片，然后在有链接的小图片上加上 href链接）

<body>
		<a href="#" class="img-box">
			<img src="/images/am_01.png" />
		</a>
		<a href="#" class="img-box">
			<img src="/images/am_02.png" />
		</a>
		<a href="#" class="img-box">
			<img src="/images/am_03.png" />
		</a>
		<a href="#" class="img-box">
			<img src="/images/am_04.png" />
		</a>
		<a href="https://你的链接/" class="img-box">
			<img src="/images/am_05.png" />
		</a>
		<a href="#" class="img-box">
			<img src="/images/am_06.png" />
		</a>
		<a href="#" class="img-box">
			<img src="/images/am_07.png" />
		</a>
	</body>