使用图像而不是文本(script type=“text/javascript”)
Use an image instead of text (script type="text/javascript")
我有一些供应商提供的代码:
<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
文本。 供应商说这做不到,但我不同意。 我已经尝试了几种不同的东西,但似乎没有什么工作是完全正确的。 我真的很感激一些帮助。 我知道我只是错过了一些小东西。 非常感谢!
仅用图像替换文本是行不通的,因为嵌入的脚本会查找单击元素的 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>
如果您能够更改源 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.
您可以将标签放置和图像到标签中。喜欢这个:
<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>
在原始问题上没有提到嵌入式脚本。
相关文章:
- 如何将输入(type=text)从html表单传递到javascript函数
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- 用Javascript添加带有#text的tr元素
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- W3验证器->使用<脚本类型=“;text/javascript”>在html的正文中
- 我如何在INPUT TEXT中使用这个Javascript和jQuery
- 节点,express应用程序返回text/javascript响应头(Content-Type),尽管设置了applic
- type=text/javascript和language=javascript之间的区别
- 使用图像而不是文本(script type=“text/javascript”)
- 为什么使用“text/javascript”
- Sublime Text:JavaScript ES5 与 ES6 的不同片段
- 我需要转义text/plain还是text/javascript
- application/javascript和text/javascript之间的区别
- php heredoc--不回显'<脚本类型=“;text/javascript”>'
- <脚本类型='text/javascript'>并且<脚本>
- rails 3 javascript未执行,尽管响应的是text/javascript内容类型
- 我们还需要"script.type='text/javascript"动态创建脚本时
- Rails默认为"text/javascript"响应使用form_for构建的非显眼JavaScr
- script type='text/javascript'>"不正确的
- <脚本类型=";text/javascript">进入iframe