javascript 将 IMG 标签中的图像转换为 <A> 标签中的实际链接图像

javascript to convert images in IMG tag to actual linked images in <A> tag

本文关键字：图像 标签 链接 IMG 转换 javascript      更新时间：2023-09-26


我以前问过这个问题，并多次尝试解决它，但没有运气。
作为一个在javascript方面经验不足的非程序员，
我想要一个书签或类似的东西来帮助我用图像链接指向的原始（全尺寸）图像替换页面上的所有图像。例如，如果我单击链接的图像，它将带我到全尺寸图像，但我希望该全尺寸图像显示在页面上。

以下是网站代码的示例：

<a href="http://www.diyphysics.com/wp-content/uploads/2012/02     Multiplier_schematic.jpg">
<img class="aligncenter wp-image-627" title="Multiplier_schematic" src="http://www.diyphysics.com/wp-content/uploads/2012/02/Multiplier_schematic-1024x205.jpg" alt="Schematic of Dual-Polarity High-Voltage Cockroft-Walton Multiplier by David and Shanni Prutchi" width="614" height="123"/>
</a>

我希望它是：

<img class="aligncenter wp-image-627" title="Multiplier_schematic" src="http://www.diyphysics.com/wp-content/uploads/2012/02/Multiplier_schematic.jpg" alt="Schematic of Dual-Polarity High-Voltage Cockroft-Walton Multiplier by David and Shanni Prutchi"/>

宽度和高度限制已被删除。

例如，这个网站

http://www.pocketmagic.net/?p=802有很多微小的低分辨率图像显示为链接，我希望书签将所有这些图像替换为它们指向的高分辨率图像。这样我就可以将页面保存为一个整体，或将其导出...

谢谢！

编辑：1. @Frosco，我试过了，但我在 JS 方面的一点知识无处可去。
2. @PhD，它应该是一个带有javascript：协议的书马。面向用户，不适合 Web 开发人员。

解决：多亏了约翰，我想通了，

这是JS书签，以防有人感兴趣：

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$('a img').each(function(index) {    var currentElement= $(this);    var anchor = currentElement.parent();    var highResSource = anchor.attr("href");    var newImage = "<img src='" + highResSource + "'/>" +"</div>";    anchor.html(newImage);});});

这样的事情应该让你开始：

$('a img').each(function(index) {
    var currentElement= $(this);
    var anchor = currentElement.parent();
    var highResSource = anchor.attr("href");
    var newImage = "<img src='" + highResSource + "'/>";
    anchor.html(newImage);
});​
你可以

试试.unwrap（）：

$('img').each(function() {
   var $this = $(this);
   if ($this.attr('src') === $this.parent('a').attr('href')) {
       $this.unwrap();
   }
});
相关文章：