第二篇 如何自製網站連結預覽縮圖功能

壹、報導前言：(好東西就要與好網友分享) 網站連結預覽縮圖的功能，主要讓訪客在點選超連結之前能先看到該網站的網頁模樣。 這項功能實質效用不大，因為您只能大略看出該網站的網頁樣子，無法察覺詳細內容。 它的技術是使用快照取圖方式預覽該網頁的模樣，然後再由訪客決定是否要連去看看。 缺點是滑鼠移到上面就會自動彈出網站連結預覽，有時還會遮蔽到訪客瀏覽網頁內容。 雖然它的噱頭大於實際功能，但其特殊展示效果也是值得大家進一步研究與把玩一番。 本篇特別介紹如何加以改良運用這項服務，讓你也可以自製網站連結預覽縮圖功能喔。 除此之外也會介紹如何取得與其他類似功能服務，讓你也可以有更多選擇與學習機會。

貳、介紹 websnapr 網站： websnapr 網站算是一個網頁快照 (snapshot) 及縮圖 (thumbnails) 的免費服務公司。 當您填入指定要的網址，它就會自動幫您擷取該網頁並產生不同尺寸的網頁快照縮圖。 如果您想要在網頁內顯示其他網站的縮圖，只要填入 email、Website Url 和 Password。 註冊後到信箱收取驗證信，即可獲得一個 developer key，讓你進行更多連結預覽設定。 該技術目前使用版本為 websnapr 2.0，而最新版本為 websnapr Bubble 3.0 beta。 基本上 websnapr 屬於完全免費服務性質，此服務仍拒絕提供使用於非法與色情網站。 另外 websnapr 也提供了一些實用的外掛 (Plugin) 程式，使用者可以依照自己的需求運用。 大部分系由網友自行開發，請參考 websnapr 外掛程式 (Implementations / Plugins)。

參、Try it now： 進入 websnapr 網站首頁，於 Website URL: 輸入貴網站的網址。 再下拉選擇想要尺寸，按下 "Capture!" 即可立即取得該網頁的快照縮圖了。 更可以將擷取話面直接上傳或分享到指定的 FTP、E-mail、Facebook、Twitter 等。 目前提供兩種尺寸：micro (90x70) 及 small (202x152) ，其輸出後顯示語法分別如下： http://images.websnapr.com/?url=http://www.webpage.idv.tw/maillist/&size=t http://images.websnapr.com/?url=http://www.webpage.idv.tw/maillist/&size=s

肆、註冊取得 developer key： 如果你想要在網站內顯示其他網站的縮圖，websnapr 也提供這項服務，不過必須先在首頁註冊。 註冊程序很簡單，請找到 I want screenshots on my site, how does it work? 位置。 再填入 Your email、Website Url 和 Password 資料即可，註冊後到信箱收取驗證信即可。 請參考詳細教學實做範例 Go 。

伍、自製網站連結預覽： websnapr - Preview Bubble Javascript v2.0 請參考詳細教學實做範例 Go 。

陸、其他七個不錯的建立網頁縮圖 (WebThumb) 服務網站： 讓你不用再像以前一樣土法煉鋼，先用 Print Screen 鍵分節抓圖，再用繪圖軟體很費工銜接起來。 提供這些網路上資訊網站因異動頻繁，並無法保證所有連結永久有效，不用來信問我。 >> 我想瞭解 <<

柒、使用 Mozilla Firefox 外掛程式： Mozilla Firefox 外掛程式又稱為 ADD ON 附加元件。 安裝後只要把滑鼠移到超連結上，右邊會出現一個放大鏡小圖示，點選後就會出現一個燈箱 (LighBox) 預覽視窗效果。 你可以在瀏覽後打開、關掉、放大縮小、移動、暫時加入最愛、郵寄 ...等功能，比上述的程式好用太多了。 最新版本 CoolPreviews 3.0.1，請到此下載安裝即可。 你也可以參觀原創作網站 另一個 Link Preview 0.1.7 外掛程式

捌、如何使用這些 JavaScript 程式： 您最好要具備 HTML 基礎及簡單的 JavaScript 程式觀念，這樣才能輕鬆的套用它。 所附的範例，您都可以按檢視原始碼打開記事本，就可以很容易的查看它的程式碼。 有些程式碼使用到外部連結檔，如 websnapr.js 或 websnapr.css 等，必須下載後使用。 以上所有範例程式歡迎訂閱會員免費下載套用，教學會員或教材會員請到本篇目錄內取得即可。 因限於人力問題，非本報教學會員請勿來信詢問問題，謝謝配合。

玖、如何取得：

拾、結論與建議：