jqzoom 局部放大檢視影像

此擴充元件提供圖片另外一種瀏覽的方式，即是以滑鼠移動檢視局部放大的瀏覽效果，只要準備小圖與放大圖，即可快速加入此效果於頁面上。

STEP1. 開啟範例練習檔dw08.html，再新增一空白檔案為 dw08-iframe.html，為要插入『jqzoom』元件。直接由dw08-jqzoom.html程式碼內，複選並貼入所需 CSS 與 Javasccript 檔連接於/head之前:

以及複選並貼入dw08-iframe.html於body內加入所需內容:

STEP2. 點取加入的內容，切換至程式碼並修正影像為預先準備小圖(white-car-image-s.jpg)與大圖(white-car-image.jpg)，原圖為小圖、連結為大圖。

STEP3. 可以切換至程式碼，更改放大檢視的視窗大小，更改【zoomWidth】與【zoomHeight】即可；檢視視窗上方的標題，只要更改【title】。

STEP4. 對於顯示視窗的屬性，可以至 CSS 樣式控制板上更改控制標題的【div.jqZoomTitle】，更改 font-size、height、color、background-color；更改控制顯示視窗的【.jqZoomWindow】按下編輯更改邊框屬性即可。

STEP5. 回到原頁面dw08.html，確定滑鼠游標在要插入內頁框儲存格內，加入iframe內容即可。

【檢視範例】【下載範例】

相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用