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

Question

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!

Are you implementing the link yourself or is the link generated by a script? You can just replace the text with an image tag <a><img></a>. If it's generated by a script you'd have to modify the script. It's not clear what the type attribute of the script element has to do with your question, if at all. — Nathan K
– Nathan K, Commented Apr 22, 2016 at 18:07
what are some of the several different things you've tried? — Jeff Puckett
– Jeff Puckett, Commented Apr 22, 2016 at 18:07
Here is the thing I thought most likely to work. BTW, this is in a TEXT box in a Wordpress Widget. I put that in the tags, but not my question! <a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/ccdhppwcbfbkhndfgtrvsdrgtkxwfvnx" onclick="shLeadFormPopup.openForm(event)"> <img src="http://www.harmonyrescue.com/wp-content/uploads/2016/04/Opt_in_Ribbon_Chall‌‌enges.png" ></a><script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/ccdhppwcbfbkhndfgtrvsdrgtkxwfvn‌‌x"></script> It does show the image, but the on_click doesn't appear to work. — Violett
– Violett, Commented Apr 22, 2016 at 19:42

blex · Accepted Answer · 2016-04-22 18:35:39Z

1

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>

edited Apr 22, 2016 at 18:35

answered Apr 22, 2016 at 18:20

blex

25.7k6 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Violett Over a year ago

these look great, but when I attempt to use the same code in the Wordpress widget it doesn't work properly. Any ideas? thanks!

blex Over a year ago

@Violett Did you use it this way : link ? If you did and it does not work, open your Javascript console (press F12), are there any red error messages? If there are, paste them here.

Violett Over a year ago

Thanks @blex! That solved the problem. I've been dinking around with this for a few days and you solved it!

blex Over a year ago

@Violett Glad I could help

Ferran · Accepted Answer · 2016-04-22 18:13:36Z

0

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.

answered Apr 22, 2016 at 18:13

Ferran

1992 silver badges7 bronze badges

3 Comments

Violett Over a year ago

Thanks F. Here is what I had tried:

<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/ccdhppwcbfbkhndfgtrvsdrgtkxwfvnx" onclick="shLeadFormPopup.openForm(event)"> <img src="http://www.harmonyrescue.com/wp-content/uploads/2016/04/Opt_in_Ribbon_Chall‌enges.png" /></a><script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/ccdhppwcbfbkhndfgtrvsdrgtkxwfvn‌x"></script>

But it didn't work. It does show the image, but the on_click doesn't appear to work.

Violett Over a year ago

I just caught the extra '/' at the end of my image source and removed it. Still not working...

Ferran Over a year ago

If you have an link element, that redirects to a page, you should first prevent the browser to go that page, if you are trying to run the code inside shLeadFormPopup.openForm method. Maybe you need to preventDefault the browser to go that page, do whatever you need, and then redirect to the page you want to go.

Ferran · Accepted Answer · 2016-04-22 18:37:25Z

0

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.

answered Apr 22, 2016 at 18:37

Ferran

1992 silver badges7 bronze badges

2 Comments

blex Over a year ago

"There's no mention on the original question about an embedded script." Yes there is, look at his code, there is a <script> tag.

Ferran Over a year ago

But there's no code inside it, and the original question do not talk about it. It's just asking for replacing an text node by a image, so my answer it works in that context. Anyway, you may get any element of the page just playing around with DOM.

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related