自助網頁縮圖

很多網站現在都有幫忙做網頁縮圖，如：
WebThumb、WebSnapr.... 等等

雖然都很方便，不過大多需要註冊會員才能使用
(都是免費的啦)

這邊介紹的是使用 http://mozshot.nemui.org
Mozilla 製作的網頁(and Ruby... 難道 Ruby 這麼好用嗎??)

隨便測試一下，在網址處輸入 http://www.google.com
結果得到三個圖片網址：
http://mozshot.nemui.org/shot?http://www.google.com
http://mozshot.nemui.org/shot/large?http://www.google.com
http://mozshot.nemui.org/shot/small?http://www.google.com

由此可見，只要在想要的 size 後面加上目標網址
就可以取得縮圖了。



另外 WebSnapr 也是使用類似的方式，至於哪一個比較好
我還在測試，不過 mozshot 好像有網頁更新延遲的問題
(看他的 www.google.com 好像有點舊....)
而且速度實在有待加強... 要使用哪一個就看個人嚕

底下介紹還是先使用 mozshot 來做說明，我想做的功能如下：
http://w5.loxa.com.tw/kk6/html/websnapDemo.html
(新增了 WebSnapr 的部份，可以參考看看)
ㄜ... 請用 FireFox... IE 好像跑不出來，不過這個網
頁的就可以，寫法一樣：
http://www.nknu.edu.tw/~ite/survey.html


也就是滑鼠移到關鍵連結的時候，會出現縮圖。

這邊所用到的東西有 jQuery Library，因為比較方便
如果不了解 jQuery 的基本用法，請先去讀一下相關文章吧~~

(底下部份請依邊參照上面網址的原始碼看)
首先要做到浮動視窗，這部份只需要用到 div 標籤就可以了。
用法如下：
<div id="FloatWindow" style="display:none; overflow:visible; position:absolute; top:0px; left:0px; width=256px; height:256px">
<div>

重點就是要有一個 id 給 jQuery 可以取得這個 DOM物件，
剩下的 style 就是設定這個視窗的出現位置了，採用絕對座標
寬高設為 256 是因為我要用的縮圖是 256*256，一開始的時候
不要顯示，所以 display 設定 none。

剩下的就是在這個 div 標籤裡面放 img 啦，個人習慣用 Table 架構
所以 div 底下還有一層 table，這就看個人了。

img 的寫法是：
<img id="preview" src="" height=100% width=100% />

相同的， id 是給 jQuery 用的，寬高就是填滿嚕(100%)
src 是要給 javascript 去填寫的，所以暫時先放空。


接著就是重點的 Javascript 了，由於打算讓圖片跟在滑鼠旁邊，所以必
須取得滑鼠的座標，方法就是使用：

document.onmousemove=function(e)
{
var evt=window.event||e;
posX=evt.clientX;
posY=evt.clientY;
}

先綁定整個 document 的滑鼠移動事件，而其中 posX 和 posY 是全域變數
分別代表滑鼠的位置。

接著撰寫連結的事件，因為是滑鼠移到連結上面時才需要出現圖片
所以連結處放一個 onMouseover 當滑鼠移到連結上時，以及 onMouseOut
當滑鼠移出時，分別執行兩個 function：
<a onMouseOver="doShot(this);" onMouseOut="clearShot();" href="http://FHCRC.tw" target="_blank">鳳新電研</a>

JavaScript 的部份：

function doShot(obj)
{
inLink=true;
var imgAdderss="http://mozshot.nemui.org/shot/large?"+obj;
$("#preview").attr("src",imgAdderss);
$("#FloatWindow").show();
}

function clearShot()
{
inLink=false;
$("#FloatWindow").hide();
}

其中 inLink 是全域變數，用來記錄滑鼠是否在連結上面
doShot() 傳入的 this 就是取得是哪個物件觸發的
剩下的應該看程式碼就懂了，當滑鼠進入時，指定
浮動視窗中的 img 來源，這個來源就是利用 mozshot 取得的圖片，
並且顯示出來( .show() )，而移出的時候就把浮動視窗給隱藏( .hide() )

那麼，要出現在哪邊，就是由document的滑鼠移動事件來考慮了：

document.onmousemove=function(e)
{
var evt=window.event||e;
posX=evt.clientX;
posY=evt.clientY;
if(inLink)
{
var theX=posX+10,theY=posY+10;

$("#FloatWindow").attr
　　　　("style","overflow:visible;position:absolute;
　　　　top:"+theY+"px;left:"+theX+"px;width=256px; height:256px");
}
}

黃色區塊為一行，目的就是取得現在滑鼠的位置，並設定浮動視窗出現的位置在
滑鼠位置又下方 (10,10) 的地方。

如此一來就大功告成囉~~