【求助】有没有办法可以设置图片热区

疑问解答
1

如题。请问有没有什么插件或者办法，可以给文档中的图片设置热区，不同的热区对应不同的链接，可以链接向不同的笔记。

PS：图片是本地粘贴进文档的，不是网上的图片或者图床里的图片。

谢谢！

2

目前想到的办法是直接用html语法导入图片并设置热区，到这里看上去都没问题，但是没法设置跳转。在href里指定了测试用的跳转目标，但点击后不会跳转。

3

楼主指的热区是超链接吗？如果是的话，可以有下列几个方案

  • 关于点击图片跳转笔记（类似Gallery的功能），有以下几个方案
    • 1、html元素或者md语法：
      • 详细可以看看我之前的评论和所在的帖子：
      • 注意html语法如果需要多端使用的话，需要下载插件，具体看下面帖子

优点：所有链接都适用；可自定义css，控制悬停、排列等样式
缺点：需要一个一个手动编写

我目前使用的是md语法放几个超链接在主页当索引，数量大检索用Dataview配合minimal主题的cards视图

1 个赞
5

谢谢！我研究下！
我指的热区是图片中分成不同的部分，不同部分有不同的超链接对象。

相对路径我用那个插件可以用的。但是在图片热区里就不行（相对路径和绝对路径都不行）。后来我把热区对应的地址换成obsidian内地址，现在点击可以跳转了。

剩下的问题是悬停控制，现在没法像md链接那样悬停的时候有预览窗口显示链接页面

6

我现在是这么用的，现在热区跳转没问题了。

<body>
<img src="/temp/test2.webp"  usemap="#test3">
<map name="test3" id="test3">
<area shape="rect" coords="0,0,400,400" href="obsidian://（obsidian内地址1）">
<area shape="rect" coords="400,400,800,800" href="obsidian://（obsidian内地址2）">
</body>

请问有没有办法使鼠标悬停热区上的时候跟鼠标悬停于obsdian链接那样浮窗预览跳转目标页面？

7

悬停预览应该没法做吧
主要这种html元素的href都是obsidian://开头的URI，内链直接就是根目录相对路径

8

你可以问问上面我发的那个用Dataviewjs实现的大佬，有单图悬浮预览的效果，我不懂js不清楚怎么做的

9

我的那个本质还是 MD 语法，分区分跳转不一定能套用，仅供看看参考。

1 个赞