登录 注册

[js] 给图片添加超链接

本贴最后更新于 252 天前，其中的信息可能已经时移俗易

功能

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

效果

r74.gif

使用

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

  2. 在需要加链接的图片上右键，然后在跳转地址中输入跳转链接即可

    imgurl.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

  • 思源笔记

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

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

    26030 引用 • 108029 回帖
  • 代码片段

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

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

    188 引用 • 1325 回帖
2 引用
[js] 希望可以图片左上方有一个复制按钮 • wilsons
笔记中可以插入的图片带超链接功能吗？ • wilsons
2 操作
wilsons 在 2025-03-12 07:20:15 更新了该帖
JeffreyChen 在 2024-10-13 11:26:24 更新了该帖
7 感谢
2 收藏
1 赞同
2 引用
2 操作
9 回帖
3
2
553 209 3 200 141

相关帖子

9 回帖
[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 • via iPhone
    付费者

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

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

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

    1 回复
  • sswzznl •
    付费者

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

  • ArthurZhao •

    谢谢，好用

  • keimi •
    付费者 捐赠者

    很好用，特别是第二版，方便很多，非常感谢

请输入回帖内容 ...
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦！💖 想催更、提需求？欢迎访问 👉 https://afdian.com/a/wilsons
回帖
1537
 帖子
71
 积分
52334

近期热议

推荐标签 标签

  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 677 关注
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 560 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    59 引用 • 22 回帖 • 14 关注
  • OpenCV
    15 引用 • 36 回帖 • 7 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • Hadoop

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

    93 引用 • 122 回帖 • 619 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖 • 1 关注
  • Access
    1 引用 • 3 回帖 • 3 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 2 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 403 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 539 关注
  • Anytype
    3 引用 • 31 回帖 • 26 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    36 引用 • 200 回帖 • 31 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 110 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    98 引用 • 903 回帖
  • 外包

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

    26 引用 • 233 回帖 • 2 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 252 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 368 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 820 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 491 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖

最新标签