登录 注册

[js] 给图片添加超链接

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

功能

  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

  • 思源笔记

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

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

    25973 引用 • 107708 回帖
  • 代码片段

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

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

    179 引用 • 1272 回帖
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
546 209 3 198 136

相关帖子

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
回帖
1515
 帖子
69
 积分
51314

近期热议

推荐标签 标签

  • ZeroNet

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

    1 引用 • 21 回帖 • 653 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 728 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖 • 1 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 710 关注
  • Visio
    1 引用 • 2 回帖
  • 知乎

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

    10 引用 • 66 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • 机器学习

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

    77 引用 • 37 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 2 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • Redis

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

    284 引用 • 248 回帖
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    209 引用 • 2040 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 364 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    180 引用 • 3878 回帖 • 2 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 3 关注
  • 人工智能

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

    115 引用 • 317 回帖
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 676 关注
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 735 关注
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 695 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 413 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 519 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 184 关注

最新标签