สนับสนุนโดย

การใช้ JavaScript ร่วมกับ FrontPage (3)

แสดงวัน-เดือน-ปี ปัจจุบัน

โค้ดนี้เป็นโค้ดง่ายๆ สำหรับแสดงวัน เดือน และปีปัจจุบัน ของนาฬิกาในเครื่องพีซีบนเว็บเพจ

ตัวอย่าง

โค้ด

<SCRIPT LANGUAGE = "JavaScript"> <!-- // Array of day names var dayNames = new Array("อาทิตย์","จันทร์","อังคาร","พุธ","พฤหัสบดี","ศุกร์","เสาร์"); var monthNames = new Array("มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน","กรกฎาคม", "สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม"); var dt = new Date(); var y = dt.getYear() + 543; // Y2K compliant if (y < 1000) y +=2443; document.write("วัน" + dayNames[dt.getDay()] + "ที่ " + dt.getDate() + " " + monthNames[dt.getMonth()] + " พ.ศ. " + y); // --> </SCRIPT>

วิธีใช้

1. คลิกขวาในกรอบข้างต้น แล้วเลือกคำสั่ง Select All โค้ดทั้งหมดจะถูกเลือก

2. กดคีย์ Ctrl+C เพื่อก๊อปปี้โค้ด

3. สลับไปที่โปรแกรม FrontPage ในแท็บ Normal ของเว็บเพจ ให้วางเคอร์เซอร์ตรงจุดที่ต้องการแสดงวัน-เดือน-ปี

4. เลือกคำสั่ง Insert Advanced HTML

5. กดคีย์ Ctrl+V เพื่อวางโค้ดที่ก๊อปปี้มาลงในไดอะล็อกบ็อกซ์ HTML Markup

6. คลิกปุ่ม OK

คุณอาจจะลองดัดแปลงโค้ดนี้เล่นๆ เช่น ให้แสดงชื่อเดือนเป็นตัวย่อ โดยการแก้ไขชื่อเดือนจาก มกราคม เป็น ม.ค. หรือลองจัดรูปแบบวันที่ใหม่ เช่น ไม่ให้แสดงชื่อวัน โดยแก้ไขการแสดงผลในคำสั่ง document.write

โหลดรูปล่วงหน้า (Preload Image)

ในการทำเอฟเฟ็คท์ "เปลี่ยนรูปภาพเมื่อถูกเมาส์ชี้" (rollover) ดังเช่นปุ่มทางซ้ายมือของเว็บเพจนี้นั้น จะต้องใช้รูปภาพ 2 ภาพ ภาพหนึ่งเป็นสถานะปกติ ซึ่งจะถูกแสดงขึ้นมาก่อน แล้วเมื่อผู้ชมเลื่อนเมาส์ไปชี้ ภาพที่ 2 จึงถูกแสดงขึ้นมาแทน อย่างไรก็ดี ในตอนที่ผู้ชมชี้เมาส์เป็นหนแรก ภาพที่ 2 ยังไม่ได้อยู่ในหน่วยความจำ ดังนั้นบราวเซอร์จึงแสดงไม่ได้ทันที จำต้องไปดึงไฟล์มาจากเซิร์ฟเวอร์ก่อน ซึ่งใช้เวลาสักครู่หนึ่ง ทำให้ผู้ชมรู้สึกว่าการตอบสนองของเอฟเฟ็คท์ไม่ดี

เรามีวิธีแก้ไขปัญหาการเสียเวลารอดังกล่าวได้ โดยใช้ JavaScript สั่งให้บราวเซอร์ไปโหลด (preload) ภาพที่ 2 มาไว้ในหน่วยความจำก่อนเลย แม้ว่าจะยังไม่ได้ใช้งาน ซึ่งเมื่อผู้ชมชี้เมาส์บนภาพ rollover ภาพที่ 2 ก็จะถูกแสดงได้ทันที

ตัวอย่าง

ภาพทั้งคู่นี้ใช้เอฟเฟ็คท์ rollover โดยภาพซ้ายมีการโหลดภาพที่ 2 ไว้ล่วงหน้า ส่วนภาพขวาไม่มี ลองเลื่อนเมาส์ไปชี้ดูจะเห็นว่าภาพซ้ายจะเปลี่ยนทันที ส่วนภาพขวาต้องรอสักครู่หนึ่ง

โค้ด

<SCRIPT LANGUAGE="JavaScript"> <!-- Begin image1 = new Image(); image1.src = "image1.gif"; image2 = new Image(); image2.src = "image2.gif"; // End --> </SCRIPT>

วิธีใช้

1. ก๊อปปี้โค้ดข้างต้นไปใส่ใน Notepad

2. แก้ไขค่าตัวแปร image1.src และ image2.src ให้เป็นชื่อไฟล์รูปภาพ ที่คุณต้องการ preload (ทำเฉพาะภาพที่ไม่ได้ถูกแสดงบนเว็บเพจทันที ส่วนภาพที่ปรากฏบนเว็บเพจตั้งแต่แรกอยู่แล้วนั้น ไม่ต้องทำ) เช่นจาก

image1.src = "image1.gif";

ก็แก้เป็น

image1.src = "images/menu_22.gif";

3. หากมีภาพที่ต้องการ preload มากกว่า 2 ภาพ ก็สร้างตัวแปรที่ 3, 4, ... เพิ่มขึ้นตามลำดับ เช่น

image3 = new Image();
image3.src = "image3.gif";

4. ก๊อปปี้โค้ดจาก Notepad ไปแทรกในส่วน head ของเว็บเพจที่มีการใช้ภาพเหล่านี้

นอกจากจะใช้กับเอฟเฟ็คท์ rollover แล้ว การ preload รูป ยังสามารถใช้กับเอฟเฟ็คท์อื่นๆ ที่มีการใช้รูปภาพ ซึ่งไม่ได้ถูกแสดงทันทีที่เปิดเว็บเพจ แต่จะถูกเรียกมาแสดงภายหลัง

Copyright © 2000-2003, Creative Ideas.  All rights reserved.
Webmaster : webmaster@provision.co.th