影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。
STEP1.
開啟「dw04.html」檔,由切割存出的HTML 檔,影像播放的內容要特別獨立切割成單獨切片的圖檔,點取要插入播放內容位置上的影像(寬:592、高:385)並直接刪除。 要加入此擴充元件的內容區必頇要是一個完整的<div>標籤,因此需要先安排<div>標籤,確 認游標在該儲存格內,執行『插入 > Div』,設定【插入:在插入點上、ID: content】,按下『新增CSS 規則』。
STEP2.
設定新增的選取器名稱為#content 的ID 類型CSS 規則,設定『方框』分類內的width:592 px、Height:385 px,按下確定完成Div 標籤的加入,作為要加入影像播放的準備。
STEP3.
開啟程式參考檔案dw04-LinkShow.html,複製相關javascript貼入原頁面的</head>之前;
接著於<body>標籤內加入所有撥放圖片內容與連結位置,播放的影像為 dw04-p1.jpg~dw04-p4.jpg 四張圖,預覽即可檢視初始的圖片自動撥放,3500為播放速度3.5秒。
STEP4.
再來設定暫停與播放按鈕控制,在要設定的按鈕圖上,加上影像地圖,點取『停止』影像地圖,切換至程式碼於連結後方加上:【 onClick="flvFLSS4('content')"】
STEP5.
點取『播放』影像地圖,切換至程式碼於連結後方加上: 【onClick="flvFLSS2('content',1,1) "】
儲存檔案按下F12 瀏覽,圖片播放的同時,就可以按下暫停或播放按鈕,來控制圖片播放。
STEP6.
最後還可以設定按下編號播放停留顯示該編號的影像,點取『1』影像地圖,切換至程式碼於連結後方加上:【 onClick="flvFLSS5('content',0)"】
以此類推即可加上其他撥放順序編號按鈕上的內容:
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用