實用程式彙報

第十篇
利用 JS innerHTML 製作相片瀏覽

適合程度： 初學者 一般程度 進階者 以上均宜
範例

壹、前言：
前一陣子上網找 javascript innerHTML 用法資料，無意間發現一個痞客邦 (PIXNET) 網站。
無呈現的網路筆記網站作者，發表這篇利用 javascript innerHTML 製作簡易相簿瀏覽方式。
也就是可以點選小圖自動切換大圖的圖片瀏覽方式，我覺得程式本身簡單而且不會很難又實用。
我將 javascript 程式改為外部連結方式，外觀上也略做美化修改，特別介紹給大家參考研究。
類似範例您也可以使用 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").innerHTML = '<img src="sakura/dsc01.jpg" width="450" height="338" border="0">';
break;
case 2: //呼叫並載入顯示第二個大圖片，以下請比照這個方式修改
document.getElementById("img").innerHTML = '<img src="sakura/dsc02.jpg" width="450" height="338" border="0">';
break;
case 3:
document.getElementById("img").innerHTML = '<img src="sakura/dsc03.jpg" width="450" height="338" border="0">';
break;
case 4:
document.getElementById("img").innerHTML = '<img src="sakura/dsc04.jpg" width="450" height="338" border="0">';
break;
case 5:
document.getElementById("img").innerHTML = '<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="javascript:preloader()"，這是用來呼叫圖片預載 javascript 程式。
<body bgcolor="#ffffff" onLoad="javascript:preloader()">

陸、編輯顯示小圖片：
同上打開 showerpics.htm 網頁每張圖片的程式碼如下：
<a href="#" onmouseover="javascript:view(1)"><img src="sakura/dsc01s.jpg" width="90" height="93" border="0">
onmouseover 是滑鼠移到該圖片時，呼叫 view(1) 程式執行 case 1 動作。
註：原作者是採用 <a href="javascript: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 程式歡迎免費訂閱與下載套用，非教學會員請勿來信詢問問題，謝謝配合。

玖、本站會員注意事項：
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗看看。
網頁研習室費心製作的 HTML 標籤教學網站，不論您是否已有基礎，都值得您進一步研習的好地方，敬請光臨指教！
原作者製作 shower.htm 範例等，均存放於 CD:/study/maillist3/pro/10/ 目錄內，本站教材(學)會員不要忘記查看喔。
您也可以加入我們的 教學會員 或 免費索取教材 ，直接由教材 CD 片內取得安裝。
已付費會員可於 CD:/study/maillist3/skill/06/ 目錄內完整取得這份資料。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。