如何將網頁文章中的連結直接變成圖片觀看

2012.09.28 06:08PM
2937
是如何將網頁文章中的連結直接變成圖片觀看這篇文章的首圖

[作者:Mesak,引用來源]

我們常常看網頁的時候會看到網頁中有圖片的網址

這個時候我們都需要去點擊他,如果只有一兩張還好

但是連結一多了你就會開始厭煩了 XD

現在要教一招可以直接取代連結中的圖片,又不需要裝任何套件的方式

首先,你需要有瀏覽器,Firefox,對就是 Firefox

firefox 在更新到某一版的時候(我忘了,就新增了新功能 "程式碼速記本"

這功能主要是給網頁設計師測試使用的

首先 先打開網頁 http://unkar.org/r/news4vip/1348583607 (抱歉我一時找不到其他範例 XD

 

e0f342c3cb8719af8b75e405206a4032

然後 Firefox 打開,點網頁開發者 → 程式碼速記本 ( 或是直接按 Shift+F4 )

 

605587d1ea18998eb96e9e42a7d2be88

接著出現這個視窗,然後貼上此段程式碼

    var imgLink = document.querySelectorAll('a[href$=".jpg"],a[href$=".gif"],a[href$=".jpeg"],a[href$=".png"]');
    for(x in imgLink )
    {
    if( typeof(imgLink[x].nodeName) == 'string' && imgLink[x].nodeName.toUpperCase() == 'A')
    {
    var sHref = imgLink[x].getAttribute('href');
    imgLink[x].innerHTML = '<img src="'+sHref+'" />';
    }
    }

eb6ad10304f34b4d4ece16739297ba23
如圖所示

 

cb34ffef1904efcb8d75e247c81fc027
接著 按下 執行 → 執行。

搞定嚕,看一下網頁他已經把連結轉為圖片了

接下來介紹一下  Chrome 的模式

Chrome 沒有程式碼速記碼,但是有控制台

直接按下 F12 就可以了

 

a7ab174e031e1ba4b9b80b0118f4f1a1
接著點 Console。

 

baa6d1864a5b031e17b0e6bdd38685ef

並直接貼以下這段:
 
var a=document.querySelectorAll('a[href$=".jpg"],a[href$=".gif"],a[href$=".jpeg"],a[href$=".png"]');for(x in a)if("string"==typeof a[x].nodeName&&"A"==a[x].nodeName.toUpperCase()){var b=a[x].getAttribute("href");a[x].innerHTML='<img src="'+b+'" />'}

 

 

5dae8d79c678d1a0c17e50dfd06d80a1

貼上之後按 Enter,馬上可以看到效果

另外再提供一種快速的模式,把下面這段程式碼複製
 
    javascript:(function(){var a=document.querySelectorAll('a[href$=".jpg"],a[href$=".gif"],a[href$=".jpeg"],a[href$=".png"]');for(x in a)if("string"==typeof a[x].nodeName&&"A"==a[x].nodeName.toUpperCase()){var b=a[x].getAttribute("href");a[x].innerHTML='<img src="'+b+'" />'};})()

之後建立一個書籤,名稱隨便打,網址部分貼上這串,就可以直接變成使用書籤來替換連結圖片了

 

↓↓↓↓↓↓加入癮科技粉絲團,有更多歡樂有趣的科技新聞↓↓↓↓↓↓

 

 

回應 0

0 則回應