หน้าแรก  Help1 แจ้งข้อแนะนำ
สลับภาพด้วย 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.   ในหน้าแก้ไข หากเรียบร้อยแล้ว   แล้วดูการแสดงที่หน้าเว็บ



เมนูที่เกี่ยวข้อง

คู่มือการใช้งาน
คู่มือโปรแกรมสำเร็จรูป
วิธีสร้างระบบสมาชิก
ฟอร์มสำเร็จรูป

วันนี้

176 คน
เมื่อวาน34 คน
เดือนนี้
ปีนี้
ทั้งหมด
855 คน
69735 คน
1516543 คน
เริ่มเมื่อ 2012-10-03
ของแต่งเว็บไซต์ บทความทั่วไป การโปรโมทเว็บไซต์ ทริปแนะนำ
THTWEB MANUAL คู่มือการใช้งานเว็บไซต์