ReadyPlanet.com
dot

dot
เลือกเวอร์ชั่น Text Editor
Editor Manual
แนะนำวิธีทำเว็บไซต์เบื้องต้น
Function Update
dot
dot
เว็บไซต์รูปแบบ Responsive web design
จัดการเมนูหลัก
เมนูโค้ดและสคริปต์ภายใต้ <head>
ประวัติการใช้งานระบบ
ตัวนับผู้ชมเว็บ
Google Service/Sitemap
จัดการอีเมลสมัครรับข่าวสาร
dot
dot
ระบบผู้ช่วย
ระบบ Chat
dot
dot
การตั้งอีเมล Pop Mail
dot
dot
bulletจัดการเว็บไซต์
bulletระบบพื้นฐาน
bulletระบบเสริม
bulletบริการสมาชิก
bulletเทคนิคอื่นๆ
bulletText Editor
dot
dot
bulletจัดการแบบฟอร์มติดต่อกลับ


สร้างรูปภาพเคลื่อนไหวแบบ Marquee

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

 
1. Log in เข้าส่วนสมาชิก คลิก Edit เมนู รายละเอียดบทนำ (หรือหัวข้ออื่น ๆ ที่ต้องการแสดงผลภาพเคลื่อนไหวแบบ Marquee)

 

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

 

  • หากต้องการผูกลิงก์รูปภาพ เพื่อให้คลิกที่รูปภาพแล้วลิงก์ไปยังหน้าเว็บไซต์ปลายทางที่ต้องการได้ ให้ท่านคลิกที่รูปภาพที่ต้องการและคลิกเครื่องมือ  (Hyperlink in Text)


 
 

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

 


3. หลังจากทำการอัพโหลดภาพเรียบร้อยแล้ว คลิกเครื่องมือ   (Marquee) จะปรากฎหน้าต่าง "Insert Marquee

  • ในช่อง Marquee ให้ท่านพิมพ์สัญลักษณ์ #
  • และในช่อง Scroll Amount /Scroll Delay ให้กำหนดค่าความเร็วในการเคลื่อนไหวของภาพ และ คลิก OK

    • direction = ทิศทางการเลื่อนซ้าย ขวา
    • behavior = การแสดงผลมีให้เลือกแบบวนต่อเนื่อง สไลด์แล้วหยุด หรือวิ่งสลับซ้ายขวาไปมา 
    • bgcolor = สีพื้นหลังในกรอบ Marquee 
    • width = ความกว้างกรอบ Marquee 
    • height = ความสูงกรอบ Marquee 
    • scrollamount = ความเร็ว หน่วยเป็น pixels ต่อวินาที
    • scrolldelay = ความหน่วง หน่วยเป็น pixels ต่อวินาที

 

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


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




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

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




แสดงตัวอย่างภาพเคลื่อนไหวที่สร้างจากเครื่องมือ Marquee

 



ข้อแนะนำเพิ่มเติม

  • รูปภาพที่จะใช้แสดงผลเป็นภาพเคลื่อนไหว ควรมีนามสกุล .gif จะแสดงผลได้ดีที่สุดค่ะ
     
  • ในกรณีไม่สามารถดึงรูปภาพไปวางในตำแหน่ง Marquee ได้ตามต้องการ  อาจใช้วิธีการ ตัด (Cut) โดยคลิกที่รูปภาพที่ต้องการ จากนั้นกดปุ่ม Ctrl+X ที่คีย์บอร์ด  จากนั้นดับเบิลคลิกในบริเวณกรอบ Marquee ให้เคอร์เซอร์เมาส์กระพริบที่ตำแหน่งที่ต้องการ และกดปุ่ม Ctrl+V (Paste) ที่คีย์บอร์ดเพื่อวางรูป ในกรอบ Marquee ค่ะ
     
  • กรณีที่รูปภาพแสดงผลอยู่ในกรอบ Marquee แล้ว จะไม่สามารถแก้ไขขนาดรูปภาพหรือแก้ไขลิงก์รูปภาพได้ หากต้องการแก้ไขภาพจะต้องดึงรูปภาพออกมานอกบริเวณกรอบ Marquee ทำการปรับขนาดรูปภาพและแก้ไขลิงก์ให้เรียบร้อย และนำภาพไปวางในกรอบ Marquee เป็นขั้นตอนสุดท้ายค่ะ


 

Jittima  Suebsook
www.ReadyPlanet.com




วิธีใส่ข้อมูลและตกแต่งเว็บไซต์สำเร็จรูป ReadyPlanet เบื้องต้น

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์สำเร็จรูป
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
การเลือกรูปแบบเว็บไซต์ (Template) และจัดโครงสร้างหน้าแรก (Layout)
เทคนิคการจัดการเมนูหลักที่สวยและดี
จัดการข้อมูลเมนูย่อยด้านข้างอย่างไรดี?
เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
ข้อควรระวังในการทำเว็บไซต์และวิธีใส่ข้อมูลในเว็บไซต์ที่ถูกต้องปลอดภัย article
4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน
ติดต่อง่าย เก็บได้ข้อมูลดังใจกับ "แบบฟอร์มอิสระติดต่อกลับ"
ไม่พลาดการติดต่อด้วย "แบบฟอร์มมาตรฐาน"
ย่อรูปภาพอย่างง่ายด้วยเครื่องมือ "กำหนดขนาดรูปภาพ"
สร้างลิงก์รูปภาพเล็กไปรูปภาพใหญ่ ด้วยเครื่องมือ Text Editor
วิธีสร้างไฟล์ภาพ Favorite Icon เพื่อแสดงผลในช่อง Address Bar
เทคนิคการสร้างลิงค์ ในหน้าเดียวกันด้วยคำสั่ง Anchor
เทคนิคการสร้างลิงก์เมนูและรูปภาพแบนเนอร์ ในพื้นที่ด้านล่างของเว็บไซต์
วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
วิธีติดตั้ง Facebook Page Plugin (Like Box) ในเว็บไซต์
วิธีแสดงผลเครื่องเล่น VDO บนหน้าเว็บไซต์
5 องค์ประกอบของเว็บไซต์ที่ดี
5 สิ่งที่ต้องมี บนโฮมเพจเว็บไซต์
แนะนำโปรแกรมตกแต่งและใส่กรอบรูปภาพฟรี! ใช้ง่าย นำไปแต่งเว็บให้โดดเด่นได้เลย
ใช้ระบบ Chat บนหน้าเว็บไซต์ ช่วยถามตอบทุกข้อสงสัย พร้อมเพิ่มโอกาสปิดการขายได้มากกว่า
โชว์เส้นทาง สร้างแผนที่บนเว็บไซต์ง่ายๆ ใช้ Google Map
Google Verification (วิธียืนยันการเป็นเจ้าของเว็บไซต์กับทาง Google)
วิธีการสร้างและยืนยัน Sitemap ของเว็บไซต์กับ Google
วิธีติดตั้งโค้ด Google Analytics
วิธีติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
สร้างฐานลูกค้าออนไลน์อย่างง่ายแต่มั่นคง ด้วยระบบสมาชิก
เทคนิคสร้างลิงค์และปุ่มโทรบนเว็บไซต์ เพื่อการติดต่อที่ง่าย แค่คลิก แล้วโทร
วิธีเพิ่มลิงก์ Add LINE และปุ่ม LINE it! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก