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