Image 使用google apps脚本创建带有超链接的图像

我一直在尝试将一个带有超链接的图像放入谷歌应用程序脚本用户界面。我第一次想到使用createAnchor（），但那只允许文本。然后我考虑使用一个按钮，但据我所知，您无法打开一个新的选项卡/窗口并在回调函数中重定向

我还尝试了createHTML（），但它尚未处理该元素

我见过人们在图像上覆盖透明按钮，但在回调中仍然存在同样的问题

我的研究还没有找到答案。有人有任何解决方案/例子吗

---

谢谢

如果您首先在一个字符串中创建所有HTML，那么您可以用您想要的HTML替换页面内容，如下所示：

var myString = 'the html you want to add, for example you image link and button';
var page = SitesApp.getSite('example.com', 'mysite').getChildByName('targetpage');
var upage = page.setHtmlContent('<div>' + myString + '</div>');  

var myString='要添加的html，例如图像链接和按钮'；
var page=SitesApp.getSite（'example.com'，'mysite'）.getChildByName（'targetpage'）；
var upage=page.setHtmlContent（“”+myString+“”）；

我认为这在可用的小部件中是不可能的。我建议改变用户界面的设计，改用锚小部件。

如果您直接在页面上编码，请使用HTML框。单击“编辑”编辑页面，然后进入菜单中的“插入>HTML框”。它也将接受javascript！这里有几个警告-当使用javascript时，HTML框将不接受链接…太糟糕了，但是有太多的漏洞

如果您正在应用程序脚本中编码，您可以尝试将图像放置在面板上，并使用绝对面板将链接定位到图像上。另一种方法是使用.setStyleAttribute进行CSS样式设置，并利用zIndex参数在图像顶部放置一个面板……如下所示：

var panel = app.createSimplePanel();
// add your image to the simple panel or whatever panel you wish to choose in your GUI

var popPanel = app.createSimplePanel()
  .setStyleAttribute('top','Y')
  .setStyleAttribute('left','X')
  .setStyleAttribute('zIndex','1')
  .setStyleAttribute('position','fixed');
// add your anchor to the popPanel

app.add(panel).add(popPanel);

无法100%确定是否可以使此面板透明，但可以尝试以下方法： .setStyleAttribute（'背景'，透明'） 或通过以下方式更改不透明度： .setStyleAttribute（'opacity'，'.5'）

---

希望这能给你一些想法

这在Chrome20和IE9上对我有效

      // Container for box and results
      var imageContainer = app.createFlexTable();


      // Setup the button
      var button = app.createButton("ImageButton");
      button.setStyleAttribute("background", "url(dontshowimagehere.JPG) no-repeat");
      button.setStyleAttribute("position", "absolute");
      button.setStyleAttribute("color", "transparent");
      button.setStyleAttribute('zIndex','1');
      button.setStyleAttribute("border", "0px solid black");



      imageContainer.setWidget(0, 0, button);

      // image to click
      var image = app.createImage("image.jpg").setId(imageId);

      imageContainer.setWidget(1,0, image);                    

---

图像有轻微（3px）偏移。如果重要的话，这看起来可以修复它（使用relative用于flex table和top等用于图像和按钮）

您是否尝试了覆盖图像的透明锚

function doGet() {
var app = UiApp.createApplication().setTitle("Image Anchor");
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
var image = app.createImage().setUrl("https://lh6.googleusercontent.com/-v0Q3gPQz03Q/T_y5gcVw7LI/AAAAAAAAAF8/ol9uup7Xm2g/s512/GooglePlus-512-Red.png").setStyleAttribute("width", "28px").setStyleAttribute("height", "28px");
var anchor = app.createAnchor("?", "https://plus.google.com/u/1/116085534841818923812/posts").setHeight("28px").setWidth("28px").setStyleAttribute("opacity", "0.1").setTarget("blank");
panel.add(image,100,50);
panel.add(anchor,100,50);
app.add(panel);  
return app.close();
}

app.createAbsolutePanel（） .add（app.createImage（“”）） .add（app.createAnchor（“”，“”） .setStyleAttributes（{位置：'absolute'，顶部：'0px'，左侧：'0px'，宽度：'201px'，高度：'47px'，不透明度：'0'}））

这是经过测试的。它很好用。 它不适用于定位图像（作为“绝对”）。

---

它不能与.setHorizontalAlignment（UiApp.HorizontalAlignment.CENTER）一起使用。

我设法用一个锚对象并使用CSS3来实现它。 它可以在Chrome上运行，我没有在其他浏览器上测试它

gui.createAnchor("", false, "$DESTINATION_URL$")
   .setStyleAttributes({ "display":"block",
                         "width":"$IMAGE_WIDTH_IN_PIXEL$",
                         "height":"$IMAGE_HEIGHT_IN_PIXEL$",
                         "background":"url($URL_OF_THE_IMAGE$)",
                         "background-size":"100% 100%",
                         "background-repeat":"no-repeat" })

当然，您必须用数据替换$…$

---

Thierry

HTML小部件不支持链接或图像.button.setStyleAttribute（“背景”，“url（image.JPG）无重复”）；在chrome上工作，但在IE上不显示。但即使有了这个问题，它也克服了IE透明按钮的点击问题。