Question

我一直试图将带有超链接的图片放到谷歌应用程序脚本ui中。我首先想到使用createAnchor（），但这只允许使用文本。然后我考虑使用一个按钮，但据我所知，你无法打开一个新的选项卡/窗口并重新定向回调函数。

我也尝试过createHTML（），但该元素尚未被它处理。

我看到人们在图片上叠加透明按钮，但在回调中仍有相同的问题。

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

由于

Answer 1

这适用于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）的偏移。如果重要的话，这样可以修复它http://www.w3schools.com/css/css_positioning.asp（对于图像和按钮，使用flex表和top等的相对值）

Answer 2

您是否尝试过覆盖图像的透明锚点？

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();
}

Answer 3

app.createAbsolutePanel（）。新增（app.createImage（＆＃39; https://www.google.com/images/logos/google_logo_41.png＆＃39;））。新增（app.createAnchor（＆＃39;＆＃39;，＆＃39; https://www.google.co.uk/intl/en/about/＆＃39;） .setStyleAttributes（{位置：＆＃39;绝对＆＃39;，顶端：＆＃39; 0像素＆＃39;，左：＆＃39; 0像素＆＃39;，宽度：＆＃39; 201px＆＃39;，高度：＆＃39; 47px＆＃39;，不透明度：＆＃39; 0＆＃39;}））

这是经过测试的。它工作正常。它不适用于定位图像（绝对＆＃39;绝对＆＃39;）。它不适用于.setHorizontalAlignment（UiApp.HorizontalAlignment.CENTER）

Answer 4

我不相信这可用于小部件。我建议改变你的UI设计，改为使用Anchor小部件。

Answer 5

如果您直接在自己的网页上进行编码，请使用HTML Box。点击“修改”编辑您的页面，然后转到菜单中的“插入＆gt; HTML Box”。它也会接受javascript！有几点需要注意 - 当使用javascript时，HTML Box不会接受链接......太糟糕了，但是有太多的漏洞。

如果您使用应用程序脚本进行编码，则可以尝试将图像放在面板上并使用绝对面板并将链接放在图像上。另一种方法可以是使用.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（ '不透明度'， '5'）

希望这会给你一些想法！

Answer 6

我设法用一个Anchor对象并使用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" })

当然你必须用你的数据替换$ ...... $。

亨利

Answer 7

如果您首先在字符串中创建所有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>');

使用google-apps-script创建带超链接的图像

7 个答案: