สลับภาพด้วย onMouseOver

วิธีการทำ

    1. เปิดหน้าที่ต้องการจะ "สลับภาพ" โดยคลิ๊กที่ไอคอนแก้ไขหน้านี้ หรือจะเข้าไปที่เมนูบาร์ 5.1 ไฟล์เนื้อหาและคลิ๊กเลือกชื่อไฟล์ ที่ต้องการแก้ไข
    2. ที่หน้าแก้ไข (editor)
      คลิ๊กภาพ (เลข1) ที่ต้องการเปลี่ยนภาพเมื่อเมาส์เลื่อนผ่าน


    3. จากนั้นคลิ๊กไอคอนCSS (เลข2)

    4. เมื่อหน้าต่าง CSS แสดงขึ้นมา
      ให้คลิ๊กแท๊บ ขั้นสูง (เลข3)

    5. กำหนดคุณสมบัติ ดังนี้

id (เลข4) ชื่ออ้างอิง (ต้องตรงกับ name เสมอ) และไม่ซ้ำกับ id อื่น กรณีมีหลายอัน เช่น
name (เลข5) ชื่อรูปภาพที่เราตั้งขึ้น
Onmouseover (เลข6) เปลี่ยนภาพใหม่เมื่อนำเมาส์ไปวางบนภาพเดิม
Onmouseout
(เลข7)
เปลี่ยนภาพใหม่เมื่อนำเมาส์ออกจากภาพเดิม


ข้อสังเกตุ :
ตำแหน่ง pic1 ทั้ง4 จุด ตรง

  • document.pic1.src ในช่อง onmouseover
  • document.pic1.src ในช่อง onmouseout
  • pic1 ในช่อง id
  • และ pic1 ในช่อง name

จะเหมือนกัน สำหรับ 1 ชุด

แต่ถ้ามีจุดสลับภาพ หลายชุด
ตำแหน่ง pic1 ทั้ง4 จุด ต้องเปลี่ยนเป็น pic2 pic3 pic4 กรณีมีจุดสลับภาพ 4ชุด ตามลำดับ

-----------------------------------------
ส่วน src='url ของภาพที่ต้องการแสดง' จะใช้ url เต็มเหมือนตัวอย่างก็ได้ครับ
แต่ถ้าเป็นรูปภาพที่อยู่ภายในเว็บไซต์ของคุณเอง ที่ได้อัพโหลดไว้ ใส่เพียง /images/ชื่อไฟล์ภาพ.นามสกุล
(หรือจะไป copy url image มาจากเมนู 5.2 ไฟล์ประกอบอื่นๆ ตรงช่องชื่อไฟล์ก็ได้ครับ)

เสร็จแล้วคลิ๊กปุ่ม ออกมา


6. ในหน้าแก้ไข หากเรียบร้อยแล้ว แล้วดูการแสดงที่หน้าเว็บ


คลิ๊กนี้มีความหมาย
  

 
 
 

 

Main menu

Service Menu

ข้อมูลน่ารู้



Customer Support
สอบถามข้อมูลเพิ่มเติม แจ้งชำระเงิน เปิดเว็บไซต์ ต่ออายุเว็บ
อีเมล์ : [email protected]

จันทร์-เสาร์ เวลา 09.00-18.00 น.

ปรึกษาปัญหาเกี่ยวกับการใช้งานเว็บไซต์
โทร. 089-887-8972
จันทร์-ศุกร์ 09.00 - 16.00 น.
E-mail: [email protected]

เพิ่มฝ่ายบริการลูกค้าใน LINE ด้วยคิวอาร์โค้ด
Term & conditions | Privacy Policy
THTWEB. Copyright @ 2007 by Sknetcenter.tht.in All rights Reserved