Skip to content Skip to sidebar Skip to footer

How Can I Replace An Image Being Shown Via Js?

I want to embed Wanelo's share button. This is the embed code:

Solution 1:

The button is being loaded dynamically via JS with inline CSS. So in the anchor tag, do this:

style="background:none !important;"

Solution 2:

Ok, here is a the updated version of your fiddle, all nice and working. Basically, the little JS snippet at "save.js" changes your anchor by adding an appropriate background image (in this case, the rectangular button that says "Wanelo"). So, that will need to be replaced inline - this will change the background image to the one you want. Of course, the default CSS style associated with "wanelo-save-button" looks like crap, so you'll need to make some stylistic changes in a custom class.

The JS:

setTimeout(function(){
    //Get the anchor elementvar 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);

And the CSS:

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

You'll notice that I used "setTimeout." This is due to a limitation on jsFiddle. In the production environment, you'll want to place your custom js file AFTER save.js loads, then in THAT file create a DOMContentLoaded listener to make sure the first Wanelo image has loaded before you modify it.

Solution 3:

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

Works.

Post a Comment for "How Can I Replace An Image Being Shown Via Js?"