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

網頁研習室【HTML】教學網站

網頁研習室【電子報】教學網站

設定步驟：
首先，下載所需檔案 previewbubble.zip。
解壓後可獲得 install.txt (安裝說明)、previewbubble.js (JS程式碼) 及 bg.png (快照圖框) 三個檔案。
你也可以使用文字編輯軟體開啟 previewbubble.js，自己編輯圖檔存放目錄。
找到這壹段即可 var bubbleImagePath = '/images/bg.png';
然後將 <script type="text/javascript" src="previewbubble.js"></script> 安插在 <head> 與 </head>之間。
接下來，在你想要預覽的連結加上 class="previewlink" 即可。
新增步驟：
打開 previewbubble.js 檔，找到 var _e=findPos(_c)[0]+ 與 var _f=findPos(_c)[1] 調整後面的數值。

使用自己抓下來的快照圖：
如果你想使用自己的快照圖，只要修改一下路徑就可以了 Go 。

注意事項：
01.使用這個自製網站連結預覽縮圖功能好處，你可隨心想設幾個都行，不需逐一去註冊與申請。
02.如果你是第一次使用本功能，因需要重新抓取網頁快照，所以出現的顯示畫面會比較慢些。
03.如果你想以新視窗開起網頁，請自行於連結標籤處加入 target="_blank" 或 target="_new"。
04.不是所有部落格都可以使用這個功能，你要自己測試看看。

發現問題：
01.如果欲顯示的位置剛好位於最右側或最下方，會造成超出螢幕頁面問題 Go 。
02.回前一頁未調整過的比較看看 Go 。