ใครๆ ก็สามารถใส่รูปภาพช่วงวันหยุดลงบนเว็บไซต์ของตนได้ แต่มีเพียงผู้สร้างเว็บไซต์ที่เจ๋งที่สุดเท่านั้นที่จะออกแบบรูปภาพเหล่านั้นเป็นสไลด์โชว์ และไม่ใช่การนำเสนอภาพนิ่งธรรมดาที่มีรูปถ่ายหนึ่งภาพและหน้า HTML หนึ่งหน้า แต่เป็นการนำเสนอภาพนิ่งแบบไดนามิกอย่างแท้จริง โดยแต่ละภาพจะถูกดาวน์โหลดไปยังหน้า HTML เดียวกัน เราจะสอนวิธีใช้ Dynamic HTML (DHTML) และ Cascading Style Sheets (CSS) เพื่อสร้างสไลด์โชว์ส่วนตัวของคุณเองซึ่งจะทำให้เพื่อน ครอบครัว และเพื่อนร่วมงานของคุณน่าเบื่อมากขึ้น ไม่นะ! มันน่าประทับใจกว่า แต่จำไว้! เนื่องจากการนำเสนอภาพนิ่งนี้เขียนด้วย DHTML จึงสามารถดูได้ในเบราว์เซอร์เวอร์ชัน 4.0 ขึ้นไปเท่านั้น
แน่นอนว่าสไลด์โชว์ประเภทนี้มีประโยชน์อย่างมาก แค่เรายังคิดไม่ออก
ขั้นตอนที่หนึ่ง
รวบรวมภาพที่คุณมีอยู่แล้วบนเว็บและครอบตัดให้มีขนาดเท่ากัน ตรวจสอบให้แน่ใจว่าช่วงขนาดไม่ใหญ่กว่า 640 x 480 พิกเซล และรักษาขนาดพิกเซลให้เท่ากันในรูปภาพทั้งหมด - หากรูปภาพมีขนาดแตกต่างกัน ผู้ชมจะรู้สึกไม่สบายตา
ขั้นตอนที่ 2
ในแท็กส่วนหัว สิ่งแรกที่คุณต้องทำคือระบุว่าคุณกำลังใช้ CSS ในแท็ก <STYLE> ในแท็ก <STYLE> ให้ตั้งค่าตำแหน่งบนหน้าที่คุณต้องการให้สไลด์ปรากฏ และตัดสินใจว่าจะเริ่มด้วยภาพพื้นหลังเปล่าหรือจะแสดงสไลด์แรกโดยตรง กรุณาตัดและวางโค้ดโปรแกรมต่อไปนี้ลงในเพจของคุณ โดยใช้พิกัดตำแหน่งที่คุณเลือก:
<STYLE type="text/css"> <!-- .slides {position:absolute; left: 25%; top:25%; การมองเห็น:ซ่อนอยู่} --> </STYLE>
ขั้นตอนที่ 3
จากนั้น จัดการกับรายละเอียดของ CSS ทันที หรือแทรก JavaScript ลงในแท็กส่วนหัว หลังจาก var numSLides = ให้กำหนดจำนวนสไลด์ที่จะแสดง (อย่าตั้งค่ามากเกินไป เพราะแต่ละภาพจะเพิ่มจำนวน KB ให้กับหน้าเป็นจำนวนมาก) ตัวอย่างของเรามีรูปถ่ายห้ารูป ต่อไปนี้เป็นรหัสโปรแกรม:
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
ขั้นตอนที่ 4
หากคุณต้องการเพิ่มข้อความคำอธิบายสำหรับรูปภาพ คุณสามารถใช้โค้ดโปรแกรมต่อไปนี้เพื่อแทนที่ข้อความคำอธิบายของเราด้วยข้อความคำอธิบายของคุณเอง:
var CaptionTxt = อาร์เรย์ใหม่ (numSlides);
ฟังก์ชัน setUpCaptions () {
CaptionTxt[1] = "ทางเข้าท่าเรือ 39"
CaptionTxt[2] = "สิงโตทะเลเดินเตร่อยู่ใกล้ท่าเรือ"
CaptionTxt[3] = "เรือจอดอยู่ที่ท่าเรือ"
CaptionTxt[4] = "จิตรกรรมฝาผนังวาฬโลกใต้ทะเล"
CaptionTxt[5] = "เกาะเล็กเกาะน้อยหรือหินในทะเล"
-
ขั้นตอนที่ 5
วางโค้ดโปรแกรมที่แสดงที่นี่ลงในไฟล์ HTML ของหน้าเว็บของคุณ ใต้คำอธิบาย JavaScript เนื่องจาก Navigator 4.0 และ IE 4.0 ตีความ CSS ต่างกัน สคริปต์ของเราจึงใช้การตรวจจับวัตถุเพื่อกำหนดโหมดการเรนเดอร์ หากโหมดที่นำเสนอคือ Navigator ก็ยังสามารถกำหนดออบเจ็กต์เฉพาะบางอย่างได้ เพื่อให้โค้ดโปรแกรม IE ยังคงทำงานได้ นอกจากนี้ นี่เป็นจุดสิ้นสุดของโค้ดโปรแกรมทั้งหมด ดังนั้นจึงต้องลงท้ายด้วยแท็ก </SCRIPT>:
ฟังก์ชั่นการตั้งค่า () {
ถ้า (!document.all) {
document.all = เอกสาร;
สำหรับ (i=1;i<=numSlides;i++) document.all[("image"+i)]
style=document.all[("ภาพ"+i)];
-
สวิตช์สไลด์(1);
}
ฟังก์ชั่น switchSlide(sDir) {
newSlide = currentSlide + sDir;
ถ้า (!newSlide) newSlide=numSlides;
ถ้า (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("รูปภาพ"+currentSlide)].
style.visibility = "ซ่อน";
// หากคุณไม่ต้องการข้อความคำอธิบาย ให้ลบบรรทัดถัดไป:
document.all["คำบรรยายภาพ"].document.forCaptions.captionsText
ค่า=captionTxt[newSlide];
currentSlide = สไลด์ใหม่;
}
//-->
</สคริปต์>
ให้ความสนใจกับความคิดเห็นใกล้กับส่วนท้ายของโค้ดโปรแกรม: หากคุณไม่มีคำอธิบาย ให้ลบบรรทัดด้านล่างออก
ขั้นตอนที่ 6
ปิดแท็กส่วนหัวด้วย </HEAD> แล้ววางโค้ดโปรแกรมต่อไปนี้ลงในส่วนเนื้อหาของไฟล์ HTML ของหน้าเว็บ โปรดทราบว่าโค้ดโปรแกรมระบุแต่ละภาพด้วยแท็ก <DIV> แยกต่างหาก ซึ่งเชื่อมโยงกับรูปแบบ <IMG src> ปกติ:
<BODY onLoad="setUp()">
<B> สไลด์โชว์ Builder.com!</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>
ขั้นตอนที่ 7
ผู้ชมของคุณจะต้องคลิกผ่านสไลด์ตามจังหวะของตนเอง ดังนั้นคุณจึงต้องเตรียมอะไรให้พวกเขาคลิก - คุณสามารถใช้ไฮเปอร์ลิงก์แบบเก่าธรรมดาได้ แต่จะซับซ้อนกว่ามากด้วยปุ่มคลิก GIF ก่อนหน้าและถัดไปแบบพิเศษ โค้ดโปรแกรมตัวอย่างใช้ตารางเพื่อเชื่อมต่อ next.gif และ Previous.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 สำหรับปุ่มคลิกก่อนหน้าและถัดไป ให้แทนที่แท็ก <IMG> ด้านบนด้วยข้อความ
ขั้นตอนที่ 8
สุดท้าย ให้ป้อนข้อความคำอธิบายที่จะแสดงใน <TEXTAREA> คุณสามารถเลือกขนาดของ <TEXTAREA> ได้ตามที่คุณต้องการ เพียงเปลี่ยนแถว= และ cols= ตัวเลข ต่อไปนี้เป็นรหัสโปรแกรม:
<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>คำบรรยายภาพ</B>
<ชื่อแบบฟอร์ม=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</รูปแบบ>
</DIV>