图像为Google中的单元格注释，显示在鼠标上方/悬停处

Question

我想将图片附加到Google电子表格的某些单元格上，在鼠标悬停在该单元格上时显示，类似于本机只显示常规单元格笔记(Shift+F2)的方式。

在本机上，Google支持在单元格中插入图像。然而，我的图像尺寸太大了，我必须使行/列的宽度/高度很大，才能以100%的速度显示。另外，我希望这些图像只出现在鼠标上方，而不是总是可见的。

(我要补充的是，我描述的功能在Excel中实际上是非常容易实现的，它允许为单元格注释设置图片背景，这是Google Sheet所不具备的。)

我发现了一个Google 副词，它似乎扩展了常规的单元格注释，以包含更丰富的内容，包括图像。不方便，它要求每个图像被上传到一个图像服务器，而不是从PC加载。这还不错，除非我无法达到上述的目标。

最后，我找到了这建议的解决方案，这对我来说是不起作用的，也就是说，当鼠标移动到URL上(不管它是否以.jpg结尾)时，图像不是作为预览加载的，只有URL本身：

​

​

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

​

​

Answer 1

问题：

在工作表中的悬停事件上没有本机触发操作的方法，也没有方法检索已从计算机上载的图像，并且没有有效的URL。这极大地限制了你所能完成的任务。

尽管如此，还是有一些解决办法可以使您接近您所要求的功能。

解决办法(showModelessDialog)：

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

理想情况下，将使用onSelectionChange触发器，因为此触发器用于在用户更改所选单元格时使用当前图像刷新无模式对话框，但由于创建无模式对话框需要授权，所以简单触发器无法运行需要授权的服务。和onSelectionChange仅作为简单触发器可用(无法安装)，这是不可能的。

因此，一种可能的工作流可以是：

• 当用户打开电子表格时，显示一个非模式对话框。
• 用户选择应该显示的图像的单元格。
• 用户单击无模式对话框(或前面的图像)中的一个按钮，用当前选定的图像刷新无模式对话框。

如何做到这一点：

要实现这一点，您可以遵循以下步骤：

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

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 (以防该单元格有图像)。此函数将在加载和单击其按钮时由无模式对话框调用。可能是这样的(regex用于检索那个-请参阅这个答案 )。

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)的尺寸。

参考资料：

• G套件文档中的对话框和侧边栏
• 可安装触发器:手动管理触发器
• getActiveRange()