图像作为 Google 表格中的单元格注释，在鼠标悬停/悬停时显示答案

【问题标题】：Image as cell note in Google Sheets, to be displayed at mouseover/hover图像作为 Google 表格中的单元格注释，在鼠标悬停/悬停时显示
【发布时间】：2020-05-27 15:55:14
【问题描述】：

我想将图像附加到我的 Google 电子表格的某些单元格中，以便在将鼠标悬停在该单元格上时出现，类似于原生纯文本常规单元格注释 (Shift+F2) 的显示方式。

Google 表格本身就支持在单元格中插入图片。然而，我的图像尺寸太大，我必须使行/列宽度/高度很大，才能以 100% 显示。另外，我希望图像仅在鼠标悬停时出现，而不是始终可见。

（我应该补充一点，我描述的功能实际上很容易在 Excel 中实现，它允许为单元格 cmets 设置图片背景，而 Google Sheets 则没有。）

我发现了一个 Google 表格 addon，它似乎扩展了常规单元格注释以包含更丰富的内容，包括图像。不方便的是，它需要将每个图像上传到图像服务器而不是从 PC 加载。那还是没问题的，只是我无法实现上述目标。

最后，我找到了this 建议的解决方法，这对我来说不起作用，因为图像不会在将鼠标悬停在 URL 上时作为预览加载（无论它是否以 .jpg 结尾），只有URL 本身是：

有趣的是，我所追求的效果实际上存在于 Google Docs 中，当时链接甚至不是图片，而只是一个页面：

【问题讨论】：

我认为建议的解决方法需要扩展 hoverzoom 才能工作。没有本地方法可以触发悬停动作。可以使用 Apps 脚本侧边栏和 onSelectionChange 触发器来解决问题，但 (1) 图像会在点击时显示，而不是悬停一次，并且 (2) 图像应该来自 URL，而不是从计算机加载。如果您认为这对您来说可能是一个有效的解决方法，我会将其发布为答案。
可能这些（变体）是唯一可能的解决方法，因此我认为值得回答 - 谢谢！安装 hoverzoom 并按照其他问题页面中的说明进行操作后，我仍然无法在将鼠标悬停在链接上方时将图像显示在单元格中 - 但这就是我接受该插件的支持
我要补充一点，我描述的功能实际上很容易在 Excel 中实现，它允许为单元格 cmets 设置图片背景，而 Google Sheets 则没有。

标签： image google-sheets

【解决方案1】：

问题：

在表格中无法触发对悬停事件的操作，也无法检索已从计算机上传且没有有效 URL 的图像。这极大地限制了您可以完成的工作。

尽管如此，有一些可用的解决方法可以让您接近所需的功能。

解决方法（showModelessDialog）：

例如，您可以创建一个非模式对话框，其目的是显示与所选单元格对应的图像。

理想情况下，将使用onSelectionChange 触发器，因为当用户更改选定单元格时，此触发器会用当前图像刷新无模式对话框，但由于创建无模式对话框需要授权，所以简单触发器 cannot run services that require authorization 和 @987654328 @ 仅可用作简单触发器（无法安装），这是不可能的。

因此，一种可能的工作流程如下：

当用户打开电子表格时显示无模式对话框。
用户选择了应该显示图像的单元格。
用户单击无模式对话框（或上一个图像）中的按钮以使用当前选择的图像刷新无模式对话框。

如何做到这一点：

要实现这一点，您可以按照以下步骤操作：

安装在用户打开电子表格时创建无模式对话框的 onOpen 触发器（需要安装触发器，因为正如我所提到的，简单触发器不能使用需要授权的服务）。为此，请转到 Apps 脚本编辑器（选择 Tools > Script editor），将此函数复制到您的 Code.gs 文件中，然后在 these steps 之后安装触发器：

function onOpenTrigger(e) {
  var html = HtmlService.createTemplateFromFile("Page").evaluate()
      .setWidth(800) // Change dimensions according to your preferences
      //.setHeight(600) // Change dimensions according to your preferences
  SpreadsheetApp.getUi()
      .showModelessDialog(html, "My image");
}

创建与无模式对话框对应的 HTML 模板。这里的想法是：当页面加载时，显示当前选择的图像。如果按钮（或图像本身）被点击，页面将刷新为当前图像（参见retrieveImage 和refreshImage）。通过File > New > HTML file在编辑器中创建一个HTML文件，并复制以下代码：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body onload="retrieveImage()">
    <img id="currentImage" onclick="retrieveImage()" alt="No image is selected" width="600">
    <button onclick="retrieveImage()">Click to refresh image!</button>
  </body>
  <script>
    function retrieveImage() {
      google.script.run.withSuccessHandler(refreshImage).getSelectedImage();
    }

    function refreshImage(imageUrl) {
      if (imageUrl) document.getElementById("currentImage").src = imageUrl;
    }
  </script>
</html>

回到您的脚本文件 (.gs)，创建一个函数以从当前单元格中检索图像 URL（如果此单元格有图像）。当无模式对话框加载并单击其按钮时，该函数将被调用。它可能是这样的（正则表达式用于检索它 - 参见this answer：

function getSelectedImage() {
  var formula = SpreadsheetApp.getActiveRange().getFormula();
  var regex = /=image\("(.*)"/i;
  var matches = formula.match(regex);
  return matches ? matches[1] : null;
}

注意：

您可以根据自己的喜好调整所选图像 (<img width="" height="">) 和无模式对话框 (.setWidth, .setHeight) 的尺寸。

参考：

【讨论】：