CODEWITHSUNDEEP
javascriptwordpressimagewidget
Violett
Violett

Reputation: 1

Use an image instead of text (script type="text/javascript")

I have some code provided by the vendor:

<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">FREE Puppies</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>

I want to replace the FREE Puppies text with an image. The vendor says it can't be done, but I disagree. I've tried several different things but nothing seems to work quite right. I'd really appreciate some help. I know I'm just missing something small. Thanks so much!

Upvotes: 0

Views: 1369

Answers (3)

Ferran
Ferran

Reputation: 199

You can place and image tag into an a tag. Like this:

<a class="sh_lead_button" href="http://www.google.es" target="_blank">
    <img src="https://www.gravatar.com/avatar/7c4c20b9134504e04754d751aa7f90c1?s=48&d=identicon&r=PG&f=1" >
</a>

There's no mention on the original question about an embedded script.

Upvotes: 0

blex
blex

Reputation: 25634

Only replacing the text with an image is not going to work, because the embedded script looks for the href attribute of the clicked element (event.target). In the case of an image inside a link tag, the target element is the image, and does not have an href attribute.

To solve that, you can catch the event on any image that is inside these links, block it, and simulate a click on the parent link.

Demo not using jQuery

var sh_lead_images = document.querySelectorAll('.sh_lead_button img');

for(var i=0; i<sh_lead_images.length; i++)
{
    sh_lead_images[i].addEventListener('click', function(e){
        e.stopPropagation();
        e.preventDefault();
        this.parentNode.click();
    });
}
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
  <img src="http://www.truthunity.net/sites/all/content/graphics/ministry-click-me-button.jpg" alt="">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>

Demo using jQuery

$('.sh_lead_button img').click(function(e){
    e.stopPropagation();
    e.preventDefault();
    $(this).parent().click();
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
  <img src="http://www.truthunity.net/sites/all/content/graphics/ministry-click-me-button.jpg" alt="">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>

Upvotes: 1

Ferran
Ferran

Reputation: 199

If you are able to change the source html, you should can easily place an image tag.

<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
    <img src="wherever-you-have-your-image.png">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>

Regards,

F.

Upvotes: 0

Related Questions