javascript將IMG標記中的圖像轉換爲實際鏈接的圖像<A>標記

我之前曾問過這個問題，並試圖解決它多次，但沒有運氣。
作爲一個非程序員用JavaScript圖片一點經驗，
我想有一個書籤或類似的東西，幫我更換了與原始（全尺寸）的頁面上的所有圖像，圖像點的鏈接至。例如，如果我點擊鏈接的圖像，它會把我轉到全尺寸圖像，但我希望在頁面上顯示全尺寸圖像。javascript將IMG標記中的圖像轉換爲實際鏈接的圖像<A>標記

這裏是一個網站的代碼
的一個實例：

<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一個bookmarlet：協議。面向用戶，而不是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);});});

來源

2012-07-05 user1502776

你有沒有試圖建立任何東西了嗎？我想你可以迭代'a'標籤，並找到只有一個'img'孩子，然後從那裏去.. – Fosco

這是否有任何*與Javascript或文件編輯？ – PhD

@PDD它與Javascript有關。 – Charlie

像這樣的東西應該讓你開始：

$('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); 
});

來源

2012-07-05 02:46:31 wkm

如何通過bookmarlet使用此腳本？我不熟悉與美元符號... – user1502776

這是jQuery，所以頁面問題將不得不有jQuery加載以及。如果他們不這樣做有也應該是一個書籤： http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet – wkm

您可以嘗試.unwrap()：

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

來源

2012-07-05 02:49:49 xdazz

如何使用bookmarlet使用它？ – user1502776

javascript將IMG標記中的圖像轉換爲實際鏈接的圖像<A>標記

回答

相關問題