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

網頁研習室【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] 調整後面的數值。
新增步驟：
打開 previewbubble.js 檔，找到 img.setAttribute("src","http://images.websnapr.com/?url="+_d); 將它設為隱藏 //。
然後在它下面，增加一列 img.setAttribute("src","images/webpage.jpg");，自己抓下來的快照圖路徑就完成了。

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

回前一頁