影像瀏覽切換顯示

影像瀏覽除了播放與控制播放外，最完美的還需要可以點圖直接開啟顯示大圖，接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件，由小圖切換瀏覽圖片，按下小圖，相對應大圖會在旁顯示。

STEP1. 開啟「dw05.html」檔，由切割存出的HTML 檔，左側空白處為要插入小圖與切 換右側大圖的內容， 開啟程式參考檔案dw05-slideshow.html，複製相關javascript貼入原頁面的/head之前；

請注意設定maxslides=4; (設定播放張數)以及小圖與大圖尺寸、大小圖檔命名規則與位置。

STEP2. 再點取程式參考檔案dw05-slideshow.html大圖並複製，點取頁面原先的大圖並直接刪除，再貼上複製的大圖。 繼續於左側空白的儲存格內，插入2列2欄、寬:100%、邊框為0之隱形表格，合併上方二儲存格，三個儲存格均設定水平置中，

複製參考檔案dw05-slideshow.html小圖貼入上方儲存格內；下方二儲存格分別插入影像dw05-prev.jpg與dw05-next.jpg。

STEP3. 接著拷貝參考檔案的【Previous】文字按鈕連結，至自行準備的 previous 播放按鈕上貼 上連結【javascript:prevSlide( )】，同樣方式至自行準備的next 播放按鈕上貼 上【Next】文字按鈕的連結【javascript:nextSlide( )】，即完成圖片播放前後控制的效果設定。

儲存檔案按下F12 瀏覽，完 成包含圖片式按鈕的影像播放器，可隨意向前、向後切換瀏覽左側小圖，按下小圖右側大圖即可切換顯示該對應大圖。

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

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