JavaScript

Rollover Image การเปลี่ยนรูปเมื่อเมาส์อยู่เหนือรูป rollover image จะเป็นคำสั่งที่ทำให้รูปภาพเราเปลี่ยนไปเมื่อเราเอาเมาส์ไปอยู่เหนือรูปที่ใช้คำสั่งนี้ เช่น ในตอนแรกแสดงรูปสุนัข แต่เมื่อเอาเมาส์ไปวางบนรูปก็เปลี่ยนไปเป็นรูป สิงโตแทน

Rollover Image 1.เลือกตำแหน่งที่ต้องการสร้าง rollover image 2. ไปที่ Insert > Image Objects > Rollover Image จะมีหน้าต่างดังรูป

มีรายละเอียดดังนี้ rollover image 1.image name ใส่ชื่อของรูป 2.original image ใส่ภาพที่ต้องการให้แสดงผล 3.rollover image ใส่ภาพที่ต้องการให้แสดงผลเมื่อเมาส์อยู่เหนือ 4.preload rollover image ถ้าเราเลือกช่องนี้ เมื่อผู้ใช้โหลดเว็บเพจครั้งแรกจะโหลดภาพ original , rollover ด้วย แต่ถ้าไม่เลือกช่องนี้ rollover image จะถูกโหลดเมื่อเมาส์อยู่เหนือ original image ทำให้การแสดงผล rollover imageช้าลง 5.alternate text คำที่แสดงเมื่อกำลังโหลดรูป หรือไม่สามารถโหลดรูปได้ 6.Go to url ใส่ปลายทางที่ต้องการให้ลิงค์ไป 3.คลิก ok เท่านี้ก็สามารถทำ rollover image ได้แล้ว

เมื่อเลื่อนเมาส์เหนือรูปที่กำหนด จะแสดงรูปที่ใหญ่กว่าในอีกตำแหน่งหนึ่ง swap image เมื่อเลื่อนเมาส์เหนือรูปที่กำหนด จะแสดงรูปที่ใหญ่กว่าในอีกตำแหน่งหนึ่ง

เริ่มต้น swap image 1.ไปที่ Window > Behaviors จะมีหน้าต่างขึ้นมาดังรูป หน้าต่างนี้ใช้สำหรับควบคุมการทำงานของ JavaScript ทั้งหมด

เริ่มต้น swap image 2.คลิกที่ปุ่ม จากนั้นไปที่ Show Event for > IE (6.0) ขั้นตอนนี้ทำเพื่อให้แสดงเฉพาะคำสั่งที่ใช้ได้สำหรับ IE 6.0 เท่านั้น เนื่องจากว่าตอนนี้มี Browser มายมายแต่ที่นิยมมาสุดก็เห็นจะเป็น IE Internet Explorer ดังนั้นเราจึงต้องกำหนดให้ใช้คำสั่งที่สามารถแสดงผลใน IE เพื่อให้ผู้ชมส่วนใหญ่สามารถใช้งานได้

เริ่มต้น swap image 3.วางตำแหน่งของรูปตามต้องการ ตัวอย่างจะวางตำแหน่งรูปขนาดเล็กทางซ้ายมือ และรูปขนาดใหญ่ทางขวามือ

เริ่มต้น swap image 4.กำหนดชื่อให้กับรูป โดยรูปขนาดเล็กจะให้ชื่อว่า a,b,c,d,e ส่วนรูปใหญ่ให้ชื่อว่า big

เริ่มต้น swap image 5.เลือกรูป a จากนั้นคลิกที่ปุ่ม เลือก Swap image จะมีหน้าต่างดังรูป

เริ่มต้น swap image มีรายละเอียดดังนี้     5.1 image ให้เลือกตำแหน่ง ของรูปที่ต้องการให้มีรูป a ขนาดใหญ่มาแทน ดังรูปเราจะให้แทนในตำแหน่งของ big     5.2 set source to เลือกรูปที่ต้องการให้มาแทน ในตัวอย่างจะเลือกรูปขนาดใหญ่ของ a     5.3 preload image ไม่ควรเลือกช่องนี้ เพราะจะทำให้โหลดภาพขยายของ a ด้วย ทำให้เว็บเพจโหลดได้ช้าลง ถ้าไม่เลือก ภาพขยาย จะถูกโหลดเมื่อเมาส์อยู่เหนือภาพ a     5.4 restore images onmouseout แสดงรูปปรกติเมื่อเคลื่อนเมาส์ออกจะรูป a ทำแบบนี้ทุกรูปที่ต้องการแสดง

เริ่มต้น swap image 6.ในช่อง Behaviors จะสังเกตุว่าเป็นดังรูป

เริ่มต้น swap image 7.เราสามารถเลือกได้ว่าจะให้แสดงรูปเมื่อมีกิจกรรมอะไร ดังตัวอย่างให้แสดงรูปเมื่อมีเมาส์อยู่เหนือรูป onmouseover หรือจะให้แสดงรูปเมื่อคลิก onmousedown

Behaviors กำหนดเหตุการณ์ที่ใช้กำหนด JavaScript เช่น OnMouseOver กำหนดให้มีกิจกรรมเมื่อมีเมาส์อยู่เหนือวัตถุที่เรากำหนด

Behaviors 1.onAbort เมื่อผู้ใช้คลิก Stop หรือ หยุดโหลดเว็บเพจ 2.onBlur เมื่อผู้ใช้เลิกสนใจวัตถุ เช่น ผู้ใช้คลิกกรอกชื่อในแบบฟอร์ม เมื่อกรอกเสร็จแล้วก็คลิกที่ช่องอื่นต่อ ถือว่าเป็น onblur 3.onChange เมื่อผู้ใช้เปลี่ยนแปลงข้อมูล เช่น เปลี่ยนอายุ ในแบบฟอร์ม 4.onClick เมื่อผู้ใช้คลิก วัตถุที่กำหนด

Behaviors 5.onDblClick เมื่อผู้ใช้ดับเบิลคลิก วัตถุที่กำหนด 6.onError เมื่อมีความผิดพลาด error ขณะกำลังโหลดข้อมูล 7.onFocus เมื่อวัตถุอยู่ในความสนใจ เช่น คลิกที่วัตถุ หรือเลือกกรอกข้อความในแบบฟอร์ม 8.onKeyDown เมื่อผู้ใช้กดปุ่มบนคีบอร์ด 9.onKeyPress เมื่อผู้ใช้กดปุ่มบนคีบอร์ด

Behaviors 10.onKeyUp เมื่อผู้ใช้ปล่อยปุ่มที่กดบนคีบอร์ด 11.onLoad เมื่อโหลดภาพหรือข้อมูลเรียบร้อย 12.onMouseDown เมื่อผู้ใช้คลิกเมาส์ 13.onMouseMove เมื่อผู้ใช้เคลื่อนเมาส์ในวัตถุที่กำหนด 14.onMouseOut เมื่อผู้ใช้เคลื่อนเมาส์ออกจากวัตถุที่กำหนด

Behaviors 15.onMouseOver เมื่อผู้ใช้เคลื่อนเมาส์บนวัตถุที่กำหนด 16.onMouseUp เมื่อผู้ใช้คลิกเมาส์และปล่อยปุ่มเมาส์ 17.onMove เมื่อผู้ใช้เคลื่อนหน้าต่าง browser window หรือ frame ที่กำหนด 18.onReset เมื่อผู้ใช้คลิกปุ่ม reset แบบฟอร์ม 19.onResize เมื่อผู้ใช้เปลี่ยนขนาด browser window หรือ frame ที่กำหนด

Behaviors 20.onScroll เมื่อผู้ใช้เคลื่อน scroll (ปุ่มกลางของเมาส์) ขึ้นหรือลงใน browser 21.onSelect เมื่อผู้ใช้เลือกข้อความใน Text filed 22.onSubmit เมื่อผู้ใช้ submit แบบฟอร์ม 23.onUnload เมื่อผู้ใช้คลิกไปที่ browser อื่น หรือหน้าต่างอื่น เมื่อเรารู้จัก Behaviors แล้ว ก็สามารถทำไปผสมรวมกับกิจกรรมของ JavaScript ได้มากมายเช่น เมื่อคลิกที่รูปจะทำให้รูปสั่น Effect > Shake เป็นต้น

Behaviors เมื่อเรารู้จัก Behaviors แล้ว ก็สามารถทำไปผสมรวมกับกิจกรรมของ JavaScript ได้มากมายเช่น เมื่อคลิกที่รูปจะทำให้รูปสั่น Effect > Shake เป็นต้น

เขย่าภาพด้วย JavaScript 1.เลือกภาพที่ต้องการเขย่า และตั้งชื่อ ดังตัวอย่างจะตั้งชื่อให้ภาพว่า imageshake

เขย่าภาพด้วย JavaScript 2.จากนั้นเลือกไปที่ window > behaviors หรือ Shift + F4 เพื่อเปิดหน้าต่าง Behaviors ขึ้นมาดังรูป

เขย่าภาพด้วย JavaScript 3.เลือกภาพที่ต้องการให้เขย่า จากนั้นคลิกที่ปุ่ม จะมีหน้าต่างดังนี้ขึ้นมา ให้เราเลือกที่ Effect > Shake

เขย่าภาพด้วย JavaScript 4.จะมีหน้าต่างขึ้นมาดังรูป ให้เลือกชื่อรูปที่ตั้งไว้ตั้งแต่หัวข้อที่ 1

เขย่าภาพด้วย JavaScript 5.เมื่อคลิก ok แล้วจะหน้าต่าง Behaviors จะเป็นดังรูป ให้เราเลือก onMouseOver เพื่อให้ภาพเขย่าเมื่อมีเมาส์อยู่เหนือภาพ

เขย่าภาพด้วย JavaScript 6.เปิดดูผลนี้ใน Browser จะเห็นว่าภาพของเราสามารถเขย่าได้เมื่อเรานำเมาส์ไปอยู่เหนือภาพ เทคนิคนี้เป็นเทคนิคที่น่าสน ถ้านำไปใช้กับการนำเสนอรูปภาพก็จะทำให้เว็บไซต์ดูน่าสนใจมากขึ้น

ทำลิงค์ด้วย JavaScript 1.ไปที่ window > behaviors หรือ Shift + F4 เพื่อเปิดหน้าต่าง Behaviors ขึ้นมาดังรูป

ทำลิงค์ด้วย JavaScript 2.เลือกรูปที่ต้องการ จากนั้นคลิกที่ปุ่ม จะมีหน้าต่างดังนี้ขึ้นมา ให้เราเลือกที่ open browser window

ทำลิงค์ด้วย JavaScript 3.จะมีหน้าต่างดังรูป

ทำลิงค์ด้วย JavaScript มีรายละเอียดดังนี้     3.1. URL to display เลือกไฟล์ที่ต้องการให้เปิดใน window browser ใหม่ อาจเลือกเป็นไฟล์รูปภาพ หรือไฟล์ HTML ก็ได้     3.2. window width กำหนดความกว้างของ window browser     3.3. window height กำหนดความสูงของ window browser     3.4. Attribute ใช้กำหนดว่าให้แสดงอะไรใน window browser ใหม่บ้าง ในตัวอย่างเราไม่แสดงอะไรใน window browser ใหม่เลย     3.5. window name ชื่อหน้าต่างใหม่ของคุณ

ทำลิงค์ด้วย JavaScript 4.กลับไปที่หน้าต่าง Behaviors อีกครั้งเลือก onClick ดังรูป เท่านี้เราก็สามารถสร้างหน้าต่างใหม่ที่เราสามารถควบคุมขนาด และการแสดงผลเครื่องมือต่างๆ ด้วย JavaScript ได้แล้ว