首页 文章

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

提问于
浏览 次
0

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

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

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

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

谢谢

image hyperlink google-apps-script

7 回答

  • 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表和顶部等的相对值）

    回复于
  • 1

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

    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();
}
    回复于
  • 1

    app.createAbsolutePanel（） . add（app.createImage（'https://www.google.com/images/logos/google_logo_41.png'）） . add（app.createAnchor（''，'https：// www .google.co.uk / intl / en / about /'） . setStyleAttributes（{position：'absolute'，top：'0px'，left：'0px'，width：'201px'，height：'47px'，opacity ： '0'}））

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

    回复于
  • 0

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

    回复于
  • 0

    如果您直接在页面上编码，请使用HTML Box . 点击“修改”编辑您的页面，然后转到菜单中的“插入> HTML框” . 它也会接受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（'background'，transparent'）或通过以下方式更改不透明度：.setStyleAttribute（'opacity'，' . 5'）

    希望这会给你一些想法！

    回复于
  • -1

    我设法用一个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" })

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

    蒂埃里

    回复于
  • 0

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

相关问题