Image as cell note in Google Sheets, to be displayed at mouseover/hover

Question

I'd like to attach images to certain cells of my Google spreadsheet, to appear upon hovering the mouse upon that cell, similar to how the native text-only regular cell notes (Shift+F2) appear.

Natively, Google Sheets supports inserting images in the cell. My image sizes are however too big, and I'd have to make the row/column width/height huge for them to be displayed at 100%. Plus, I'd want the images to only appear upon mouseover, and not always be visible.

(I should add that the functionality I describe is actually very easily achievable in Excel, which allows setting a picture-background for cell comments, something that Google Sheets does not.)

I discovered a Google Sheets addon which seems to extend regular cell notes to include richer content, including images. Inconveniently, it requires each image be uploaded to an image server rather than be loaded from the PC. That would have still been fine, except I couldn't get it to achieve the above stated goal.

Finally, I found this suggested workaround, which for me does not work, in the sense that the image is not loaded as a preview upon mousing over the URL (whether it ends with.jpg or not), only the URL itself is:

Interestingly, the effect I'm after actually exists in Google Docs , when the link isn't even an image but just a page:

Answer 1

Issue:

There is no native way to trigger actions on hover events in Sheets, and there is no way to retrieve images that have been uploaded from the computer and don't have a valid URL. This greatly limits what you can accomplish.

Nevertheless, there are workarounds available that can get you close to the functionality you're asking for.

Workaround (showModelessDialog):

You could, for example create a modeless dialog whose purpose would be to show the image corresponding to the selected cell.

Ideally, onSelectionChange trigger would be used, since this trigger to refresh the modeless dialog with current image when the user changes the selected cell, but since creating a modeless dialog requires authorization, simple triggers cannot run services that require authorization , and onSelectionChange is only available as a simple trigger (cannot be installed), that won't be possible.

So one possible workflow could be the following:

Show a modeless dialog when the spreadsheet is opened by a user.
The user selects the cell with the image that should be shown.
User clicks a button in the modeless dialog (or the previous image) to refresh the modeless dialog with the currently selected image.

How to do this:

To achieve this, you can follow these steps:

Install onOpen trigger that creates modeless dialog when the user opens the spreadsheet (the trigger needs to be installed, since, as I mentioned, simple triggers cannot use services that require authorization). To do that, go to the Apps Script editor (selecting Tools > Script editor ), copy this function to your Code.gs file, and install the trigger following 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");
}

Create the HTML template corresponding to the modeless dialog . The idea here would be: when the page loads, the currently selected image is shown. If the button (or the image itself) gets clicked, the page will refresh with current image (see retrieveImage and refreshImage ). Create an HTML file in the editor via File > New > HTML file , and copy the following code:

<!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>

Back in your script file ( .gs ), create a function to retrieve the image URL from current cell (in case this cell has an image). This function will get called by the modeless dialog when it loads and when its button is clicked. It could be like this (regex is used to retrieve that — see this answer :

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

Note:

You can adapt the dimensions of both the selected image ( <img width="" height=""> ) and the modeless dialog ( .setWidth , .setHeight ) according to your preferences.

Image as cell note in Google Sheets, to be displayed at mouseover/hover

Question

1 answers

solution1
1 ACCPTED 2020-05-29 13:47:09

Issue:

Workaround (showModelessDialog):

How to do this:

Note:

Reference:

Image as cell note in Google Sheets, to be displayed at mouseover/hover

Question

1 answers

solution1 1 ACCPTED 2020-05-29 13:47:09

Issue:

Workaround (showModelessDialog):

How to do this:

Note:

Reference:

solution1
1 ACCPTED 2020-05-29 13:47:09