Tips & Tricks วันนี้มีเทคนิคการตกแต่งเว็บไซต์ให้น่าสนใจยิ่งขึ้น ด้วยการใช้เครื่องมือ Marquee ในการทำรูปภาพเคลื่อนไหว รวมทั้งสามารถทำให้รูปภาพหยุดเคลื่อนไหวเมื่อมีการนำเมาส์ไปชี้ที่ภาพ และคลิกลิงค์จากรูปภาพไปยังหน้าเว็บไซต์ที่ต้องการได้  โดยมีขั้นตอนดังนี้ค่ะ

1. Log in เข้าส่วนสมาชิก เลือกเมนู รายละเอียดบทนำ

2. ทำการอัพโหลดภาพที่จะทำภาพเคลื่อนไหว โดยใช้เครื่องมือ  (Easy Upload Image) หรือ  (Upload Image)

3. จากนั้น ทำการผูกลิงค์รูปภาพ ให้ท่านคลิกที่รูปภาพที่ต้องการและคลิกเครื่องมือ  (Hyperlink in Text)

4. ปรากฎหน้าต่าง Link ให้ท่านใส่ URL ที่อยู่ของหน้าเว็บไซต์ปลายทางที่ต้องการให้ลิงค์จากรูปภาพไปถึง และคลิก OK

5. หลังจากทำการอัพโหลดภาพเรียบร้อยแล้ว คลิกเลือก   (Marquee) จะปรากฎหน้าต่าง "Insert Marquee"
     - ในช่อง Marquee ให้ท่านพิมพ์สัญลักษณ์ #
     - และในช่อง Scroll Amount /Scroll Delay ให้กำหนดค่าความเร็วในการเคลื่อนไหวของภาพ และ คลิก OK

direction = ทิศทางการเลื่อนซ้าย ขวา
behavior = การแสดงผล
bgcolor = สีพื้น
weight = ความกว้าง
height = ความสูง
scrollamount = ความเร็ว หน่วยเป็น pixels ต่อวินาที
scrolldelay = ความหน่วง หน่วยเป็น pixels ต่อวินาที

6. จะปรากฎสัญลักษณ์ # บอกตำแหน่งพื้นที่ ที่กำหนดเป็น Marquee ไว้ ให้ท่านคลิกเมาส์ค้างไว้ที่รูปภาพที่ได้ทำการอัพโหลดและผูกลิงค์ไว้ก่อนหน้านี้  แล้วดึงรูปภาพมาวางเรียงไว้หลังสัญลักษณ์ # ที่พิมพ์ไว้ในช่อง Marquee

7. เมื่อจัดวางรูปภาพในช่อง Marquee เรียบร้อยแล้ว ให้ลบสัญลักษณ์ # ออก และคลิกที่เครื่องมือ  (Source)

8. ข้อมูลรูปภาพและตัวอักษรจะถูกแปลงเป็น HTML Code ให้ท่านนำโค้ดคำสั่งต่อไปนี้ วางหลังคำว่า marquee เพื่อให้รูปภาพหยุดเคลื่อนไหวเมื่อมีการนำเคอร์เซอร์เมาส์ไปชี้ที่รูปภาพ  และคลิก ตกลง เพื่อบันทึก

โค้ดคำสั่ง : onMouseOver="this.stop()" onMouseOut="this.start()"

แสดงตัวอย่างภาพเคลื่อนไหว

10 July 2009
Jittima  Suebsook
www.ReadyPlanet.com