登录 注册

[js] 给图片添加超链接

功能

  1. 单击跳转到设定的 URL 页面
  2. ctrl+ 单击，用浏览器打开设定的 URL 页面
  3. 单击和双击互不影响
  4. 支持手机端跳转
  5. 支持思源等自定义协议跳转
  6. 在未使用本代码的情况下，已设定的 URL 不受影响

效果

r74.gif

使用

  1. 把下面的代码放到设置=》外观 =》js 代码片段中

  2. 在需要跳转的图片的地址中添加 url 参数 url=xxxx 即可（无论?url=xxx 或&url=xxx 均可）

    image.png

代码

备份代码地址

https://gitee.com/wish163/mysoft/blob/master/%E6%80%9D%E6%BA%90%E7%BB%99%E5%9B%BE%E7%89%87%E6%B7%BB%E5%8A%A0%E8%B6%85%E7%BA%A7%E9%93%BE%E6%8E%A5.js

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    22926 引用 • 92174 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    85 引用 • 516 回帖
1 操作
JeffreyChen 在 2024-10-13 11:26:24 更新了该帖
6 感谢
2 收藏
1 赞同
1 操作
7 回帖
3
2
216 150 1 62 3

相关帖子

7 回帖
[js] 给图片添加超链接

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • CongSec •
    付费者 捐赠者

    建议增加区分图片是否含有链接的标识

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    什么意思？什么情况下，会有链接标识？

    1 回复
  • JeffreyChen • • 1 赞同
    付费者 支持者 捐赠者

    他应该指的是类似这个插件的效果，如果有链接的话就添加一个图标：

    image.png

    1 回复
  • wilsons • • 1
    付费者 捐赠者 作者

    @JeffreyChen @CongSec

    明白了，最简单的方式是添加下下面这个样式，代码已更新。

    如果不喜欢 🔗 这个图标，也可以自定义别的，比如 🌏 等。

    [data-type="img"] > span:has(> img[src*="url="])::before {
    content: "🔗";
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 20px;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 2px;
    border-radius: 5px;
    background-color: #ffffffaa;
}

    image.png

  • sswzznl •
    付费者

    大佬，我在 js 填入了代码，但点击图片并不会跳转超链接，请教下是不是还需别的设置才行？还有，是不是本地图片不能使用该办法，我本地图片再图片名称后面添加超链接，图片都无法显示了

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    和是否本地图片无关，你是不是链接后面没加"?"号？能否把你的链接截图看看？或者把你的文档打包上传论坛看看

    1 回复
  • sswzznl •
    付费者

    😂 是我疏忽了（？）的存在，感谢大佬的付出，刚用上思源，现在感觉越来越顺手了

请输入回帖内容 ...
wilsons
回帖
890
 帖子
27
 积分
23337

近期热议

推荐标签 标签

  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 232 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1435 引用 • 10055 回帖 • 489 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • 创业

    你比 99% 的人都优秀么？

    85 引用 • 1399 回帖
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1706 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 626 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    728 引用 • 1273 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 4 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 23 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 10 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 38 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 631 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 6 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 770 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 634 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 26 关注
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 141 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    135 引用 • 190 回帖 • 1 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 484 关注
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 65 回帖 • 445 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 47 关注

最新标签