Question

我有一些供应商提供的代码：

<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>

我想用图片替换FREE Puppies文字。该供应商表示无法完成，但我不同意。我尝试了几种不同的东西，但似乎没有什么工作做得很好。我真的很感激一些帮助。我知道我只是错过了一些小事。非常感谢！

Answer 1

仅使用图像替换文本不起作用，因为嵌入式脚本会查找所单击元素的href属性（event.target）。对于链接标记内的图像，目标元素是图像，并且没有href属性。

要解决这个问题，您可以在这些链接中的任何图像上捕获事件，阻止它，并模拟父链接上的点击。

演示不使用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>

使用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>

Answer 2

如果您能够更改源html，则应该可以轻松放置图像标记。

<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>

此致

F。

Answer 3

您可以将标记放置并标记到标记中。像这样：

<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>

关于嵌入式脚本的原始问题没有提及。

使用图像而不是文本（脚本类型=＆＃34; text / javascript＆＃34;）

3 个答案: