利用 JS innerHTML 製作相片瀏覽─網頁研習室【網頁製作系列報導】─智邦公益電子報
enews.url.com.tw · August 18,2016壹、前言：
壹、前言：
前一陣子上網找 javascript innerHTML 用法資料，無意間發現一個痞客邦 (PIXNET) 網站。
無呈現的網路筆記網站作者，發表這篇利用 javascript innerHTML 製作簡易相簿瀏覽方式。
也就是可以點選小圖自動切換大圖的圖片瀏覽方式，我覺得程式本身簡單而且不會很難又實用。
我將 javascript 程式改為外部連結方式，外觀上也略做美化修改，特別介紹給大家參考研究 Go。
類似範例您也可以使用 JavaScript 程式，改成單張的圖片顯示效果喔 Go。
無呈現的網路筆記網址 Go
貳、程式介紹：
本程式分成兩部份，HTML 網頁與 javascript 程式碼。
首先請先下載 showerpics.js 程式碼(按右鍵 -> 另存目標)，並使用任何文書編輯器打開查看。
showerpics.js 程式又區分成圖片預載與呼叫載入兩個部份。
註：原本作者是將此程式與 HTML 網頁放在一起，為了簡化我將 javascript 程式碼改為外部連結方式。
圖片預載功能是參考訪客意見，另外加進去的，如果您的圖檔不是很大或很多，此部份可以省略。
參、圖片預載 javascript 程式碼：
//雙斜線表示這段程式說明或註解。
function preloader() { //執行圖片預載
var i = 0;
imageObj = new Image();
images = new Array();
images[0]="sakura/dsc01.jpg" //sakura/dsc01.jpg 為大圖片預載路徑與檔名
images[1]="sakura/dsc02.jpg" //以下請依存放路徑、圖片檔名與順序修改即可
images[2]="sakura/dsc03.jpg"
images[3]="sakura/dsc04.jpg"
images[4]="sakura/dsc05.jpg"
for(i=0; i<=4; i++) {
imageObj.src=images[i];
}
}
肆、呼叫顯示圖片 javascript 程式碼
//雙斜線表示這段程式說明或註解。
function view(t) {
switch(t){
case 1: //呼叫並載入顯示第一個大圖片
document.getElementById("img")[removed] = '<img src="sakura/dsc01.jpg" width="450" height="338" border="0">';
break;
case 2: //呼叫並載入顯示第二個大圖片，以下請比照這個方式修改
document.getElementById("img")[removed] = '<img src="sakura/dsc02.jpg" width="450" height="338" border="0">';
break;
case 3:
document.getElementById("img")[removed] = '<img src="sakura/dsc03.jpg" width="450" height="338" border="0">';
break;
case 4:
document.getElementById("img")[removed] = '<img src="sakura/dsc04.jpg" width="450" height="338" border="0">';
break;
case 5:
document.getElementById("img")[removed] = '<img src="sakura/dsc05.jpg" width="450" height="338" border="0">';
break;
}
}
以上 sakura/dsc01.jpg 請依存放路徑、圖片檔名與順序修改即可。
在 sakura/dsc01.jpg 圖檔後面，我另外加入一段文字說明(汐止櫻花照片一)，讓圖片也能跟隨內容說話。
註：這裡原作者是採用 CSS (串接式排版) style="border:4px solid #FFF;" 來定義每張圖片邊框顏色與厚度。
因為我已改用一個特殊圖檔造型外框(詳參陸、說明)，所以只加入了圖檔寬度與高度，以符合實際需要。
伍、修改 HTML 網頁：
1.打開 showerpics.htm 網頁 -> 按下檢視 -> 原始碼，查看本段 HTML 語法。
2.在 <head> 與 </head> 間加入以下這段 javascript 程式，這是用來呼叫外部連結的 javascript 程式。
範例：<script type="text/javascript" src="showerpics.js"></script>
3.在 <body 內加入 onLoad="[removed]preloader()"，這是用來呼叫圖片預載 javascript 程式。
範例：<body bgcolor="#ffffff" onLoad="[removed]preloader()">
陸、編輯顯示小圖片：
同上打開 showerpics.htm 網頁 -> 每張圖片的程式碼如下：
<a href="#" onmouseover="[removed]view(1)"><img src="sakura/dsc01s.jpg" width="90" height="93" border="0"></a>
onmouseover 是滑鼠移到該圖片時，呼叫 view(1) 程式執行 case 1 動作。
註：原作者是採用 <a href="[removed]view(1)">，點擊後顯示圖片功能。
其他後面的 view(2) .....，比照上述方式修改即可。
這裡您只要修改 sakura/dsc01s.jpg 的小圖片存放路徑、圖片檔名與尺寸即可。
小圖片尺寸自已可以配合實際需要修改，範例造型我是運用 nEOiMAGING.exe 軟體套用花用邊框製作成的。
nEOiMAGING.exe 軟體教學，請參考我的第三期電子報，編輯工具解說第八篇 -> 影像處理 nEO iMAGING 光影魔術手。
我另外用一個列的表格將這些小圖示排列整齊，您可以依需要自行調整。
柒、編輯顯示的大圖片：
同上打開 showerpics.htm 網頁 -> 大圖片的程式碼如下：
<div id="img"><img src="sakura/dsc01.jpg" width="450" height="338" border="0"></div>
<div id="img"> 與 </div> 不能省略，這是告訴 showerpics.js 程式，圖片要切換顯示的位置。
這裡您只要修改 sakura/dsc01.jpg 的大圖片存放路徑、圖片檔名與尺寸即可，圖片尺寸自已可以配合需要修改。
我另外用一個特殊圖檔造型外框，將此大圖片包起來，您也可以依需要自行調製別的樣式。
特殊圖檔造型外框，可到我的網頁圖窟 WebPage Of Picture Hole 找到更多圖檔造型外框 Go。
註：原作者是採用 CSS (串接式排版) style="border:4px solid #FFF;" 來定義這張大圖片邊框顏色與厚度。
捌、如何學習這些 JavaScript 程式：
建議您最好要具備 HTML 基礎及簡單的 JavaScript 程式觀念，才能輕鬆的套用它。
有興趣歡迎閱讀我的第三期電子報，初學者的園區第五篇 -> 初學者如何學習 JavaScript 語言 Go。
JavaScript 程式碼，可直接使用記事本打開，且很容易的查看它是如果運作的。
如果您有興趣，這個 javascript slideshow 也可以研究看看喔 Go。
特別介紹一款 image menu 給大家 - 不用 Flash 也能達到滑動清單效果 Go。
如果您喜歡 Flash 效果的相片瀏覽，這個 Slideshow 2! 應該很適合您 Go。
這個可讓您編輯內容，決定相片名稱、頁數及標題，並且還可以在完成後得到一個獨立網址 Go。
30 Scripts For Galleries, Slideshows and Lightboxes Go。
14 jQuery Photo Slideshow Go。
Galleria Demo Go。
這是一個不錯的 Javascript 教學文章庫網站初學者學習 Go。
提供這些網路上資訊網站因異動頻繁，並無法保證所有連結永久有效，不用來信問我。
以上所有 JavaScript 程式歡迎免費訂閱與下載套用，非教學會員請勿來信詢問問題，謝謝配合。
玖、本站會員注意事項：
為了讓您學習方便，本站特別為訂閱戶打包這隻完整程式，讓您輕鬆的套用它 Go。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗看看。
網頁研習室費心製作的 HTML 標籤教學網站，不論您是否已有基礎，都值得您進一步研習的好地方，敬請光臨指教！
為利網友快速取得本報導所相關檔案等資料，歡迎到網頁研習室網站進一步完整取得教材或獲得更多線上指導服務。
您也可以加入我們的教學會員或免費索取教材，直接由教材光碟 (CD) 片內取得更多學習資料。
原作者製作 shower.htm 範例等，均存放於 CD:/study/maillist3/pro/10/ 目錄內，本站教材(學)會員不要忘記查看喔。
拾、結論與建議：
|
⊕本電子報每篇報導至少花了 4 天時間編輯與修改，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。 ⊕本電子報 第三階段 報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。 ⊕強烈建議您【學會 HTML 語法】，她真的簡單易學，懂了她您就能駕馭她，將【所見即所得】軟體當做輔助工具吧。 ⊕一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。 ⊕為因應網友要求，本報自即日起全面改為 索取教材資料 方式 ，繼續提供及服務有此需求網友。 ⊕本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。 ⊕本報導內容或資料，因限人力、時間，非 索取教材資料包含線上指導 網友，不接受任何疑惑解答，敬請見諒。 ⊕對本篇有任何問題，歡迎大家前往網頁教學 議題討論版 ，發表您的看法或建議，讓彼此更能互動受惠。 ☆本報導 非會員 可免費訂閱及享用我的電子報報導成果，而 會員 則可以進一步取得所有資料與線上指導。 ☆本站所有報導資料，歡迎網友免費加入鏈結，但請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。 |
