影像瀏覽切換顯示

閱讀時間約 1 分鐘
影像瀏覽除了播放與控制播放外,最完美的還需要可以點圖直接開啟顯示大圖,接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件,由小圖切換瀏覽圖片,按下小圖,相對應大圖會在旁顯示。
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專業網頁編輯應用
為什麼會看到廣告
avatar-img
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔,由切割存出的HTML 檔,影
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔,由切割存出的HTML 檔,影
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
〔張家祖廟〕(即發祥堂)位於臺中市西屯區協和里安和路111號,本為漳州馬田張家的私人祠堂,正殿奉祀祖先牌位,左右有內外護龍(廂房),是台中市保存完好的閩南傳統民居。這座祖廟在1985年11月27日經臺中市政府公告為國家第三級古蹟;左外護龍(廂房)被登錄為「歷史建築」。
Thumbnail
戰前先來看一下,嚴尤勸王邑繞過昆陽打宛城的那個建議靠譜嗎? 從事後諸葛亮的角度來看很靠譜,因為此時宛城的守將是更靠譜的岑彭,後來的雲台28將中的老六,朔江滅蜀的雲台之光,漢軍已經被他從正月到現在整整拖了五個月了,早已師老兵疲。 但岑彭同樣堅持不了多久了,宛城餓的已經快吃人了,打昆陽直接導致損失了
Thumbnail
圖:大稻埕之民生百態:李臨秋故居/莊永明故居。(圖/臺北市政府文化局提供) 【李婉如/ 報導】 臺北市全市內目前共計557處文化資產,數量居全國之冠。為活化推廣臺北市文化資產,臺北市政府文化局自107年起以影像方式製作名人故居巡禮,112年第五期以「聲音映像」為題,拍攝「賴氏祖厝」、「
Thumbnail
本系列是針對本書發起的企劃,因談論許多現象或電影內容可援引當中的內容,但本書含索引近500頁,根據各篇章做簡要筆記,對於日後想針對特定內容做查詢會容易許多。 本系列已至最終章節,針對視覺文化---如同人類、貨品在全球化的架構下產生的變化與特徵。 1.現代化導致影像的移動有了大幅的提升(電視、衛星
Thumbnail
原文發表於 2011/06/16 善待作品,你的作品便會給你什麼樣的回報。─Bang-Yao Liu劉邦耀
Thumbnail
無淚的英雄,往往只是暴戾的莽漢。失去了眼淚,就失去了人性。這樣的人,不是變得「戾氣」十足,就是經由其它管道來宣泄被壓抑的淚水,結果,有的變成消化道在流淚,因潰瘍而出血;有的變成心胸在流淚,為哮喘或狹心症所苦;有的變成皮膚在流淚,出現蕁麻疹;這些身體症狀其實都是心靈在流淚、滴血的象徵。
Thumbnail
因為呂布襲取兗州,劉備受到陶謙與徐州官員的重視成為徐州牧,結果卻也因為呂布襲取下邳而丟失徐州,完全應了當初陳群的預言。劉備不但猶如落水狗般,遭到袁術與呂布的追擊,最後更陷入兵疲糧盡的局面,困守於海西,同時還要面臨楊奉、韓暹等西涼軍團的侵擾,劉備隨時都可能面臨全軍覆沒的局面。
Thumbnail
袁紹與公孫瓚在黃河以北打得火熱的同時,擔任敵後部隊協防於平原的劉備,卻在此時突然一炮而紅,從縣令一躍而成為州牧,成為具有全國知名度的軍閥之一。
Thumbnail
公孫瓚字伯珪,遼西令支人,本來是郡守的從吏書佐,因為公孫瓚能言善辯,討論公事頭頭是道,於是受到遼西太守的賞識,不僅將女兒嫁給公孫瓚為妻,還資助公孫瓚求學,因此公孫瓚得以拜當代大儒盧植為師,也與劉備成為了同窗好友。 公孫瓚 劉備被黃巾軍打敗後,便投靠了這位昔日無所不談的同窗好友。公孫瓚對劉備也還算
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
〔張家祖廟〕(即發祥堂)位於臺中市西屯區協和里安和路111號,本為漳州馬田張家的私人祠堂,正殿奉祀祖先牌位,左右有內外護龍(廂房),是台中市保存完好的閩南傳統民居。這座祖廟在1985年11月27日經臺中市政府公告為國家第三級古蹟;左外護龍(廂房)被登錄為「歷史建築」。
Thumbnail
戰前先來看一下,嚴尤勸王邑繞過昆陽打宛城的那個建議靠譜嗎? 從事後諸葛亮的角度來看很靠譜,因為此時宛城的守將是更靠譜的岑彭,後來的雲台28將中的老六,朔江滅蜀的雲台之光,漢軍已經被他從正月到現在整整拖了五個月了,早已師老兵疲。 但岑彭同樣堅持不了多久了,宛城餓的已經快吃人了,打昆陽直接導致損失了
Thumbnail
圖:大稻埕之民生百態:李臨秋故居/莊永明故居。(圖/臺北市政府文化局提供) 【李婉如/ 報導】 臺北市全市內目前共計557處文化資產,數量居全國之冠。為活化推廣臺北市文化資產,臺北市政府文化局自107年起以影像方式製作名人故居巡禮,112年第五期以「聲音映像」為題,拍攝「賴氏祖厝」、「
Thumbnail
本系列是針對本書發起的企劃,因談論許多現象或電影內容可援引當中的內容,但本書含索引近500頁,根據各篇章做簡要筆記,對於日後想針對特定內容做查詢會容易許多。 本系列已至最終章節,針對視覺文化---如同人類、貨品在全球化的架構下產生的變化與特徵。 1.現代化導致影像的移動有了大幅的提升(電視、衛星
Thumbnail
原文發表於 2011/06/16 善待作品,你的作品便會給你什麼樣的回報。─Bang-Yao Liu劉邦耀
Thumbnail
無淚的英雄,往往只是暴戾的莽漢。失去了眼淚,就失去了人性。這樣的人,不是變得「戾氣」十足,就是經由其它管道來宣泄被壓抑的淚水,結果,有的變成消化道在流淚,因潰瘍而出血;有的變成心胸在流淚,為哮喘或狹心症所苦;有的變成皮膚在流淚,出現蕁麻疹;這些身體症狀其實都是心靈在流淚、滴血的象徵。
Thumbnail
因為呂布襲取兗州,劉備受到陶謙與徐州官員的重視成為徐州牧,結果卻也因為呂布襲取下邳而丟失徐州,完全應了當初陳群的預言。劉備不但猶如落水狗般,遭到袁術與呂布的追擊,最後更陷入兵疲糧盡的局面,困守於海西,同時還要面臨楊奉、韓暹等西涼軍團的侵擾,劉備隨時都可能面臨全軍覆沒的局面。
Thumbnail
袁紹與公孫瓚在黃河以北打得火熱的同時,擔任敵後部隊協防於平原的劉備,卻在此時突然一炮而紅,從縣令一躍而成為州牧,成為具有全國知名度的軍閥之一。
Thumbnail
公孫瓚字伯珪,遼西令支人,本來是郡守的從吏書佐,因為公孫瓚能言善辯,討論公事頭頭是道,於是受到遼西太守的賞識,不僅將女兒嫁給公孫瓚為妻,還資助公孫瓚求學,因此公孫瓚得以拜當代大儒盧植為師,也與劉備成為了同窗好友。 公孫瓚 劉備被黃巾軍打敗後,便投靠了這位昔日無所不談的同窗好友。公孫瓚對劉備也還算