บทเรียนที่ 15 สลับภาพด้วย onMouseOver

บทเรียนที่ 15 สลับภาพด้วย onMouseOver

                    บทนี้เป็นตัวอย่างการใช้ onMouseOver และ onMouseOut แบบพิเศษขึ้นมาอีกระดับ แต่บทนี้จะคล้ายกับ บทเรียนที่ 4 บทเรียนที่ 15 สลับภาพด้วย onMouseOver ซึ่งจะเกิดเหตุการณ์หนึ่งเมื่อลากเมาส์มาวางบน link และอีกเหตุการณ์หนึ่ง เมื่อนำเมาส์ออกจาก link   ...อย่าลืมว่าไม่ต้องใช้ <script> และ >/script> เราสามารถวางตัวสร้างการโต้ตอบทั้งสอง ลงในคำสั่ง HTML ได้ ซึ่งในที่นี่คือคำสั่งสร้าง link (<a href>) และสังเกตว่าสคริปต่อไปนี้จะมีคำสั่งเรียกรูปภาพ(<img src=.......>) ซึ่งอยู่ภายใน link แทนที่จะเป็นข้อความเหมือนบทที่ 4

สคริป...

<A HREF="http://www.google.co.th"
onMouseOver="document.pic1.src='http://www.freewebs.com/maneemeeta/action.jpg'"
onMouseOut="document.pic1.src='http://www.freewebs.com/maneemeeta/na.jpg'">
<IMG SRC="C:/My Documents/My Pictures/na.jpg" border=0 NAME="pic1">
</A>

เรามาแยกโครงสร้างสคริปนี้กันครับ

<A HREF="http://www.google.co.th"
onMouseOver="document.pic1.src='http://www.freewebs.com/maneemeeta/action.jpg'"
onMouseOut="document.pic1.src='http://www.freewebs.com/maneemeeta/na.jpg'">
<IMG SRC="C:/My Documents/My Pictures/na.jpg" border=0 NAME="pic1">
</A>

                    จากที่คุณรู้เกี่ยวกับตัวสร้างการโต้ตอบ ตอนนี้คุณคงจะแยกโครงสร้างหลักเองได้แล้ว นี่เป็น link อีกแบบหนึ่งครับ เป็น link รูปภาพ ที่เมื่อคลิ๊กที่รูปแล้วจะนำผู้ใช้ไปยังเว็บที่กำหนด โดยเรานำคำสั่ง HTML ที่ใช้เรียกรูปภาพมาวางไว้ในคำสั่งสร้าง link ซึ่งในคำสั่งเรียกรูปภาพ คุณจะเห็นผมใช้ border=0 (border แปลว่าขอบหรือริม) นั่นหมายถึงผมไม่ต้องการให้มีเส้นเกิดที่ขอบรูปครับ (ใครยังไม่รู้ ทดลองดูครับ copy บรรทัด <img ...........pic1"> แล้วไปวางใน notepad แล้วเปลี่ยนที่อยู่รูป ให้เป็นที่อยู่ภาพใดก็ได้ในเครื่องของคุณ แล้วลบ border=0 แล้ว save ไว้ แล้วเปิดออกดู)

                    เมื่อคุณลากเมาส์ไปวางบนรูป รูปที่อยู่ใน http://www.freewebs.com/maneemeeta/action.jpg จะถูกแสดงออกมา หากยังไม่นำเมาส์ไปวาง หรือนำเมาส์ออกจากรูปแล้ว รูปที่อยู่ใน http://www.freewebs.com/maneemeeta/na.jpg จะถูกแสดงออกมา

หลักสำคัญคือ...

·         ทั้ง onMouseOver และ onMouseOut ต้องใช้ตัวใหญ่เล็กเช่นนี้เท่านั้น(ภาษาฝรั่งเรียกคำสั่งแบบนี้ว่า case-censitive แปลว่าเป็นกรณีที่อ่อนไหว)

·         document.pic1.src   เป็นคำสั่งที่เป็นไปตามกฎของลำดับชั้นตัวถูกกระทำ ซึ่ง document หมายถึง เอกสาร HTML ที่เปิดอยู่ และ pic1 เป็นชื่อของรูปภาพที่เราตั้งขึ้น และ src คือส่วนประกอบของรูปภาพ ที่บอกที่อยู่รูปภาพนั้น

·         จะดีมาก หากรูปทั้งสองมีขนาดเท่ากัน(คุณแก้ไขรูปให้มีขนาดเท่ากันก่อนได้) เพราะจะทำให้หน้าไม่เลื่อน (ในตัวอย่างรูปไม่เท่ากันครับ คุณจะเห็นว่าเมื่อลากเมาส์เข้าๆออกๆรูป เนื้อหาด้านล่างจะเลื่อนขึ้นๆ ลงๆ หากมีเนื่อหาอยู่ด้านข้างรูปด้วย คุณคงจะจินตนาการออกว่าจะเป็นอย่างไรนะครับ)

---

แบบฝึกหัด

                   ให้คุณสร้างหน้าที่มีชื่อของคุณอยู่บนสุดตรงกลางหน้า(ใช้ <center> และปิดชื่อด้วย </center>) ซึ่งเป็นชื่อตัวใหญ่ขนาด h1 (ใช้ <h1> และปิดชื่อด้วย </h1>) ด้านล่างเป็นรูปภาพที่คุณหาจากในเครื่องของคุณ เมื่อนำลากเมาส์มาวางบนรูปนั้น อีกรูปหนึ่งจะโผล่ออกมาแทน ให้เหมือนกับที่ผมทำแบบข้างล่างนี้...(รูปภาพก็จัดให้อยู่ตรงกลางด้วยนะครับ)