如何通过JS替换正在显示的图像？

Question

我想嵌入Wanelo的分享按钮。

这是嵌入代码：

<a class="wanelo-save-button"
  href="//wanelo.com/"
  data-url=""
  data-title=""
  data-image=""
  data-price=""></a><script async="true" type="text/javascript" src="//cdn-saveit.wanelo.com/bookmarklet/3/save.js"></script> 

当我嵌入它时，我得到了这个按钮：

我想用他们的图标替换该按钮，如下所示：

作为JS的新手，我无法理解如何在生成共享功能的同时将该按钮与生成交换并将此图标放在其中。

以下是他们的链接：http://wanelo.com/about/buttons#save-button 我的JSFIDDLE：

http://jsfiddle.net/VCG8c/

请指出正确的方向。

Answer 1

好的，这是一个updated version of your fiddle，一切都很好，很有效。基本上，“save.js”中的小JS片段通过添加适当的背景图像（在这种情况下，显示“Wanelo”的矩形按钮）来更改锚点。因此，需要内联替换 - 这会将背景图像更改为您想要的背景图像。当然，与“wanelo-save-button”相关联的默认CSS样式看起来像垃圾，因此您需要在自定义类中进行一些风格更改。

JS：

setTimeout(function(){
    //Get the anchor element
    var anchor = document.querySelectorAll('a.wanelo-save-button')[0];

    //Change the backgroundImage property
    anchor.style.backgroundImage = 'url("http://i.stack.imgur.com/X0r5e.png")';

    //Add an appropriate CSS class for styling
    anchor.className += ' myCheckerBackground'
}, 3000);

CSS：

a.wanelo-save-button.myCheckerBackground{
    height: 88px;
    width: 101px;
    background-repeat: no-repeat;
    background-size: cover;    
}

你会注意到我使用了“setTimeout”。这是由于jsFiddle的限制。在生产环境中，您需要在加载save.js之后放置自定义js文件，然后在THAT文件中创建DOMContentLoaded listener以确保在修改之前加载了第一个Wanelo图像。

Answer 2

该按钮是通过带有内联CSS的JS动态加载的。所以在锚标签中，执行以下操作：

style="background:none !important;"

Answer 3

<a class="wanelo-save-button" href="//wanelo.com/">
    <img src="whatever image you want here" alt="">
</a>
<script async="true" type="text/javascript" src="//cdn-saveit.wanelo.com/bookmarklet/3/save.js</script>

作品。