任何人都能將假期的照片放在自己的網站上，但只有最酷的網路建構者會將他們設計成一場幻燈片秀。而且還不是那種簡單的一張照片一個HTML頁面的幻燈片，而是一個真正有動態感的幻燈片秀，每個影像都下載到同一個HTML頁面去。我們會教你如何使用Dynamic HTML (DHTML)和Cascading Style Sheets(CSS)去建立專屬你個人的幻燈片秀，讓你的朋友、家人和同事覺得更無聊，喔不！是印象更深刻。但是記住！因為這種幻燈片秀是用DHTML寫的，因此它只能在4.0以上更新的瀏覽器版本才能看到。
當然嘍，這種幻燈片秀也有嚴肅的用途。只是我們現在還沒想到而已。
步驟一
收集你已經準備好放在網路上的影像，而且將他們裁成相同的尺寸。確定尺寸範圍不超過640 x 480個像素，而且所有的相片的像素尺寸都要保持相同——如果照片尺寸大小不定，對觀眾而言會造成視覺上的不和諧。
步驟二
在你的頁首標籤裡，你首先要做的，就是在<STYLE>標籤裡指出使用的是CSS。在<STYLE>標籤裡，在你想要投影片出現的頁面設定位置，並決定一開頭是否要以空白背景圖表現，或是直接秀出第一張投影片。請將下列程式碼剪貼到你的頁面中，並使用你自己選擇的位置座標：
<STYLE type="text/css"> <!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} --> </STYLE>
步驟三
接下來立刻處理CSS的細節部分，還是在頁首標籤中插入JavaScript。在var numSLides =之後，設定要秀出的幻燈片數目（別設太多，因為每一張照片都會為網頁增加可觀的KB數）。我們的範例中有五張照片。以下是程式碼：
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
步驟四
如果你想加入圖片的解釋說明文字，可以用下列的程式碼，將我們的說明文字換成自己的說明文字：
var captionTxt = new Array(numSlides);
function setUpCaptions() {
captionTxt[1] = "39號碼頭入口。"
captionTxt[2] = "海獅在碼頭附近漫步。"
captionTxt[3] = "小船在碼頭靠岸。"
captionTxt[4] = "水底世界鯨魚壁畫。"
captionTxt[5] = "海中小島或是岩石。"
}
步驟五
將這裡所示的程式碼貼到你網頁中的HTML文件，位置就在JavaScript的說明文字下。因為Navigator 4.0和IE 4.0以不同的方式解讀CSS，我們的script就使用物件偵測（object detection）來決定呈現的模式。如果呈現的模式是Navigator，它還是可以定義某些特定的對象，使得IE程式碼還是有作用。另外這也是整個程式碼的結尾，所以一定要以</SCRIPT>標籤來結束：
function setUp() {
if (!document.all) {
document.all = document;
for (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
}
switchSlide(1);
}
function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].
style.visibility="hidden";
// 如果不要說明文字，請移除下一行:
document.all["captions"].document.forCaptions.captionsText.
value=captionTxt[newSlide];
currentSlide = newSlide;
}
//-->
</script>
注意那些靠近程式碼結尾的註解：如果你沒有說明文字，那麼就將它下面一行的文字移除。
步驟六
以</HEAD>關閉頁首標籤，然後將下列的程式碼，貼到網頁HTML檔案中的body部分。 請注意，程式碼以個別的<DIV>標籤區分每個影像，他們和正規的<IMG src>格式有關聯：
<BODY onLoad="setUp()">
<B> Builder.com slide show!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
步驟七
觀眾必須以自己的步調來點選幻燈片，所以你得提供他們點按的東西。 。你可以使用簡單老式的超鏈接，但是若有特殊的Previous和Next的GIF點選按鈕，就精巧多了。樣本程式碼是使用一個table來連接next.gif和previuos.gif：
<DIV style="position:absolute; top:350px; left:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
如果你不想用GIF檔來做Previous和Next點選按鈕，就用文字取代上面的<IMG>標籤。
步驟八
最後，在<TEXTAREA>輸入欲顯現的說明文字。你可以隨意決定<TEXTAREA>的尺寸大小，只要改變rows=和cols=的數字即可。以下是程式碼：
<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>Picture caption</B>
<FORM name=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV>