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

╰+攻爆jí腚メ 2021-09-24 07:28 460阅读 0赞

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

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

![20200520103121884.png][]

## **方法：** ##

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

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

[HTML <a> 标签的 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>

[20200520103121884.png]: /images/20210923/b319f8adebb447cc83815bf0655950d0.png
[HTML _a_ _ coords]: https://www.w3school.com.cn/tags/att_a_coords.asp

发表评论取消回复

表情：

评论列表（有 0 条评论，460人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML ＜a＞ download 属性,点击链接来下载图片

Html5里面的标签的 Download 属性可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf,

冷不防/ 2022年12月09日 13:56/ 0 赞/ 420 阅读

相关如何让链接为空即点击时不进行跳转

主要是针对<a href="\"></a>时，还进行跳转的情况。通常会跳转到首页。解决的几种办法如下： 1. <a href="\\\\"></a> 2. <a hre

落日映苍穹つ/ 2022年06月07日 07:49/ 0 赞/ 171 阅读

相关链接跳转（本页面跳转）

href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不

末蓝、/ 2022年05月23日 03:29/ 0 赞/ 341 阅读

相关下拉框点击跳转链接地址

[下拉框点击跳转链接地址][Link 1] <select onchange="javascript: window.open(this.options[t

柔光的暖阳◎/ 2022年04月24日 05:12/ 0 赞/ 260 阅读

相关锚链接跳转

想让页面跳转到指定的地方，这个时候我们可以用到锚链接，锚链接主要有两个部分组成，点击的地方和跳转的地方，点击的地方我们用 <a>标签，其 href 属性和即将跳转的标签的id保

迈不过友情╰/ 2022年04月23日 14:44/ 0 赞/ 294 阅读

相关页面内锚链接跳转

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

系统管理员/ 2022年04月16日 01:53/ 0 赞/ 283 阅读

相关同页面锚链接(例如点击顶部导航跳转底部)

![1681505-20190814174001847-1007871856.png][] 　　　　<div class="top"> <img class="img1"

谁借莪１个温暖的怀抱￠/ 2021年10月30日 06:08/ 0 赞/ 311 阅读

相关多图点击跳转超链接

思路-为了让图片能够跳转,这里使用超链接把图片包围住 html标签部分 ![Image 1][] 我是第一张图片 ![Image 1][] 我是第二张图片 ![I

ゝ一纸荒年。/ 2021年10月23日 09:55/ 0 赞/ 344 阅读

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

博主因为工作中遇到，有些UI图片里有多个链接，要求用户可以点击图片内相关的链接进行跳转。比如：以下是一张图片（非页面），但是要求点击图片不同位置，跳转到不同网址： !

╰+攻爆jí腚メ/ 2021年09月24日 07:28/ 0 赞/ 461 阅读

相关点击链接跳转到微信公众号关注页、微信关注链接

感觉现在微信又更新了，原来好好的方法不给用了，可能是微信一直在禁用通过外部链接引导到关注页的举动，不支持。通过重定向跳转至全部消息列表页，关注按钮一闪而过，然后消失了。。。暂

电玩女神/ 2021年09月16日 17:20/ 0 赞/ 1990 阅读