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

博主因为工作中遇到,有些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>

 

全部评论

相关推荐

头像
2025-12-27 13:01
三峡大学 C++
点赞 评论 收藏
分享
2025-11-24 14:22
安徽师范大学 财务
勇敢求职牛牛:然后简历的话,我个人意见(双非本有零星的垃圾offer),学校经历太多了,写了也应该往财务方面靠,然后技能方面多写一点吧,比如ERP的水平,对某些行业的流程(制造业),对数据的逻辑和敏感之类的
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务