在微信公众号上，点击图片，跳转链接是怎样做的？

M9D · 发表于 2023-2-6 10:01:21

如果仅仅是实现题主所说的在公众号内点击图片跳转链接，那太简单了。
我们在图文中插入一张图片，然后点击选择这张图片，接着点击上方「超链接」按钮，在出现的窗口中输入链接，点击「完成」就OK了。

在微信公众号上，点击图片，跳转链接是怎样做的？

注意一般的公众号只能输入公众号图文链接，其他非公众号图文链接属于外部链接，只有开通微信支付的服务号在图文中可以插入外链。（部分开通时间较早的账号或较大的媒体账号也可以插入，属于特殊情况）
知道了给图文中图片插入链接的方法和要求，我们再来看看怎么给图片插入链接，可以让读者阅读时体验更佳。
带有超链接的图片，图片右上角会有一个链接符号，读者点击图片会弹出一个提示弹窗，再次点击确认才能进入链接。

在微信公众号上，点击图片，跳转链接是怎样做的？

而其实右上角的链接符号和提示弹窗都能去掉，这样可以保证长图排版的美观性，还能提升链接跳转率。这就要用到 iPaiban Pro 黑科技编辑器（http://x.iPaiban.com）。

在微信公众号上，点击图片，跳转链接是怎样做的？

第1步：选择组件
在PC 端 Chrome（谷歌浏览器）打开 iPaiban Pro 黑科技编辑器并登录，点击编辑器左侧的「组件」-「超链接」，找到「超链接-图片（无角标）」组件，或者直接在搜索框中搜索组件编号10033。

在微信公众号上，点击图片，跳转链接是怎样做的？

第2步：上传底图和跳转链接
点击编辑区域右侧的“换图”，上传想要显示的图片。

在微信公众号上，点击图片，跳转链接是怎样做的？

第3步：设置跳转链接
最后，在区域右侧输入“跳转链接”即可。这里还是要注意，只有开通微信支付的认证服务号，才有跳转外部链接的权限。

除了一张图片可以添加一个超链接，但如果一张图片上想要添加多个超链接，怎么搞？
比如让下面一张图片，点击每个头像都能跳转对应链接。

在微信公众号上，点击图片，跳转链接是怎样做的？

还是使用 iPaiban Pro 黑科技编辑器就可以实现。上传一张图片，我们就可以在该图片的各个位置设置不同超链接/小程序的触发点，触发点数量不限。
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组件」按钮，在「超分类中找到「超链接-图片(设置多个链接区)」组件，或者直接在搜索框中搜索组件编号11134。

在微信公众号上，点击图片，跳转链接是怎样做的？

第2步：上传图片素材并设置超链接数量
点击右侧「换图」按钮上传准备好的图片素材。因为该组件会自动去掉超链接的角标符号，我们在制作图片时最好给需要点击的位置设计一个引导点击的标识。
接着在下方输入框输入要设置的超链接数量。

在微信公众号上，点击图片，跳转链接是怎样做的？

第3步：设置超链接触发区
双击编辑区图片，拖动色块即可设置超链接触发区。

在微信公众号上，点击图片，跳转链接是怎样做的？

第4步：输入超链接
根据设置好的超链接位置，在右侧输入框填入对应的超链接。

在微信公众号上，点击图片，跳转链接是怎样做的？

这样就完成了一张图片添加多个超链接的效果。
使用 iPaiban Pro 点击图片除了可以跳转到外部链接，还可以跳转到公众号、视频号、小程序等，大家可以自己去探索一下，也可以关注公众号【i排版】，学习更多排版黑科技，做出让用户和老板都满意的排版。

M9D · 发表于 2023-2-6 10:02:11

雅葆轩易支付 - 行业领先的免签约支付平台

一、网页版本点击跳转到添加好友界面：（直接用下面的链接地址，将QQ号改成自己的即可）

http://wpa.qq.com/msgrd?v=3&uin=26198573&site=qq&menu=yes

复制代码

测试：点击QQ加好友
测试：点击跳转外部链接测试
网页页脚代码

VIP会员可进入源码技术交流群100个技术员的技术支持：<a href=&#34; &#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34;><img title=&#34;源码交易技术支持群&#34; src=&#34;//pub.idqqimg.com/wpa/images/group.png&#34; alt=&#34;源码交易技术支持群&#34; border=&#34;0&#34; /></a>
站长QQ：26198573?<a rel=&#34;nofollow&#34; href=&#34;tencent://message/?uin=26198573&#34;><img rel=&#34;nofollow&#34; src=&#34;http://wpa.qq.com/pa?p=1:26198573:17&#34; width=&#34;25&#34; height=&#34;17&#34;></a>?官方QQ群：321570506
Copyright &copy; 2016-2018 <a href=&#34; &#34; title=&#34;雅葆轩运维&#34; target=&#34;_blank&#34;>hmwlcm.cn</a> Reserved.备案号：粤ICP备2021009077号

复制代码

效果展示

QQ跳转网页代码

在微信公众号上，点击图片，跳转链接是怎样做的？

<a target=&#34;_blank&#34; href=&#34;http://wpa.qq.com/msgrd?v=3&uin=26198573&site=qq&menu=yes&#34;><img rel=&#34;nofollow&#34; src=&#34;http://wpa.qq.com/pa?p=1:26198573:17&#34; alt=&#34;技术支持&#34; title=&#34;技术支持&#34;/></a>
<a target=&#34;_blank&#34; href=&#34;http://wpa.qq.com/msgrd?v=3&uin=1070257799&site=qq&menu=yes&#34;><img border=&#34;0&#34; src=&#34;http://wpa.qq.com/pa?p=2:26198573:53&#34; alt=&#34;售前咨询&#34; title=&#34;售前咨询&#34;/></a>
<a target=&#34;_blank&#34; href=&#34;http://wpa.qq.com/msgrd?v=3&uin=2551840828&site=qq&menu=yes&#34;><img border=&#34;0&#34; src=&#34;http://wpa.qq.com/pa?p=2:26198573:51&#34; alt=&#34;售后咨询&#34; title=&#34;售后咨询&#34;/></a>
<a target=&#34;_blank&#34; href=&#34;http://wpa.qq.com/msgrd?v=3&uin=26198573&site=qq&menu=yes&#34;><img border=&#34;0&#34; src=&#34;http://wpa.qq.com/pa?p=2:26198573:52&#34; alt=&#34;咨询代理&#34; title=&#34;咨询代理&#34;/></a>
<a target=&#34;_blank&#34; href=&#34;https://qm.qq.com/cgi-bin/qm/qr?k=nYCt0BAqQU0lPj75cNkViqrFJ6gb7PgV&jump_from=webapi&#34;><img border=&#34;0&#34; src=&#34;//pub.idqqimg.com/wpa/images/group.png&#34; alt=&#34; 雅葆轩运维&#34; title=&#34; 雅葆轩运维&#34;></a>

复制代码