ทำปุ่ม Rollover ง่ายจังฮู้ว

posted on 07 Oct 2008 15:59 by xvista in Computer

หลังจากที่ทำธีมใหม่ ทำให้นึกอะไรบางอย่างออกมา

ตรง Google Custom Search ด้านบน ปุ่ม Search. ด้านบน มีลูกเล่นอะไรบางอย่างครับ

มันคือ Rollover ครับ

เอ๊า Rollover คืออะไรมิทราบ...

อยากรู้ ก็ลองเอาเมาส์ของท่าน ไปแตะๆ วางๆ บนปุ่ม Search. นั่นสิครับ

เห็นอะไรมั้ยครับ

ปุ่มเรืองแสงครับพ่อคู๊ณณณ

ความจริงมันก็ไม่ได้เรืองแสงอะไรหรอก เบื้องหลังมันมีแบบนี้

สร้างปุ่มแบบ Image โดยใช้ Element ของ HTML ชื่อ input กำหนดให้รูปเริ่มต้นเป็นรูปนี้ครับ
เขียนโค้ดว่า "ถ้าเราเอาเมาส์ไปวางไว้เหนือสิ่งนี้แล้ว ขอให้เปลี่ยนรูปเดิมนี้ เป็นรูปนี้เถิด"
เขียนโค้ดเพิ่มว่า "ขณะนี้เมาส์วางบนรูปนั้น ถ้าเราเอาเมาส์ออก ขอให้กลับมาเป็นรูปนี้ ดังเดิม

แค่นี้ล่ะครับ ไม่มีอะไรจริงๆ

ดังนั้น เราจะมาสาธิตกันครับ โดยใช้ JavaScript ช่วยครับ

เกริ่นก่อนนะครับ ในโลกของการเขียนโปรแกรมเชิงวัตถุ หรือว่า OOP เนี่ย มีสิ่งควรรู้ 2 อย่างครับ คือ

Event หรือ เหตุการณ์
Behavior หรือ การกระทำที่เกิดหลังจากเหตุการณ์

ดูตัวอย่างง่ายๆ ก่อน

ดูประโยคนี้ครับ

"เอ็กซ์กินมากไป เอ็กซ์จึงอ้วกแตกอ้วกแตน" (เอาเหตุการณ์จริงที่เพิ่งเกิดขึ้นเมื่อไม่กี่วันมาแฉ )

จะเห็นว่า...

เอ็กซ์กินมากไป เป็น Event และ
เอ็กซ์จึงอ้วกแตกอ้วนแตน เป็น Behavior ครับ

เราก็ประยุกต์สิครับ

"เมื่อเมาส์วางเหนือรูป ภาพ A กลายเป็นภาพ B"

"เมื่อเอาเมาส์ออก ภาพ B กลายเป็นภาพ A"

พอจะแยกออกไหมครับ ว่าภายในประโยคทั้งสองนี้ ส่วนไหนของประโยคเป็น Event และส่วนไหนเป็น Behavior

ดูของจริงดีกว่า เนาะ...

จากไอ้ประโยคตะกี้นี้แหละขอกำหนดให้...

ภาพ A คือภาพนี้

Path ของรูปนี้คือ "http://uc.exteenblog.com/xvista/images/imagehost/computer/20081007/hover/out.gif"
ภาพ B คือภาพนี้

Path ของรูปนี้คือ "http://uc.exteenblog.com/xvista/images/imagehost/computer/20081007/hover/hover.gif"

มาถึงส่วนของโค้ดกันบ้าง

ดูนี่ครับ..

Button

นี่โค้ดแสดงภาพ ธรรมด๊าธรรมดาครับ

และนี่...

Button onmouseover="" onmouseout="" />

เห็นอะไรไหมครับ...

เราหาจุดใส่ Event ในโค้ดได้แล้วครับ

จุดใส่ของมันก็คือตรงที่ทำหนาๆ ไว้อ่ะครับ

อยากจะกำหนดเหตุการณ์ตอนเอาเมาส์ไปวางเหรอ... onmouseover ไง

กลับกัน ตอนเอาเมาส์ออกล่ะ... onmouseout สิ

สรุป ในโค้ดนี้ มี 2 Events คือ onmouseover และ onmouseout นั่นเอง

แต่จากโค้ด ทั้ง 2 Events นี้ ยังไม่มี Behavior ใดๆ รองรับครับ เพราะในเครื่องหมาย "" มันยังว่างอยู่

เราสามารถใส่ Behavior ในเครื่องหมาย "" นี่ละครับ

ทีนี้ Behavior ที่ใส่ มันต้องใช้ JavaScript ครับ ปนๆ กับเรื่องของ DOM ซึ่งเป็นเรื่องพื้นฐานสุดๆ ของ AJAX ครับ

ไม่ต้องไปสนมันหรอก มันยาก เรารู้แค่ว่าจะทำปุ่ม Rollover ยังไงก็พอ

เราจะลองแก้โค้ดเป็นแบบนี้ครับ

Button

เท่านี้ละครับ ปุ่มของเราก็เป็น Rollover แล้วววว

เฮร้ยยยยย เดี๋ยวก่อน! ยังไม่ได้อธิบายอะไรเล้ย

จากประโยค this.setAttribute('src','hover.gif');

มาดูครับ

this แทนวัตถุนั้นๆ เอง พูดง่ายๆ คือ แทนตัวเองครับ
setAttribute คือการแก้ไขคุณสมบัติของวัตถุที่กำหนด ในที่นี้วัตถุนั้นคือ this ครับ

จากโค้ด แสดงว่า setAttribute มันจะเข้าไปแก้ไขคุณสมบัติที่ชื่อว่า src ซึ่งเป็นตัวบ่งบอกที่อยู่ของรูปภาพนั่นเองครับ ซึ่งจากโค้ด คือแก้ให้เป็นอีกรูปหนึ่งที่ชื่อว่า hover.gif ครับ

ตรงส่วนของ onmouseout ก็เหมือนกันน่ะแหละ

เอ้อ ใน setAttribute เครื่องหมาย ' ต้องเป็นขีดเดียวนะ ห้ามใช้สองขีดแบบนี้ " เดี๋ยวโค้ดมั่ว

ถ้าเป็นโค้ดซ้อนโค้ด เช่น

เขียน Function แยกออกมาเลยคงจะง่ายกว่า (สำหรบผม)

มารูป 2 รูปนี้ต่อ ขอย้อนความอีกว่า

ภาพ A คือภาพนี้

Path ของรูปนี้คือ "http://uc.exteenblog.com/xvista/images/imagehost/computer/20081007/hover/out.gif"
ภาพ B คือภาพนี้

Path ของรูปนี้คือ "http://uc.exteenblog.com/xvista/images/imagehost/computer/20081007/hover/hover.gif"

ดังนั้น โค้ดที่เราจะต้องพิมพ์คือ

src="http://uc.exteenblog.com/xvista/images/imagehost/computer/20081007/hover/out.gif" alt="Button" title="Button" onmouseover="this.setAttribute('src','http://uc.exteenblog.com/xvista/images/imagehost/computer/20081007/hover/hover.gif');" onmouseout="this.setAttribute('src','http://uc.exteenblog.com/xvista/images/imagehost/computer/20081007/hover/out.gif');" />

ผลลัพธ์ครับ ออกมาแบบนี้

Button

ไม่หนำใจ ถ้าอยากให้เป็นลิงก์คลิกได้ ก็ใส่แท็ก a ครอบเลยครับ แบบนี้ครับ

href="http://en.wikipedia.org/wiki/Lorem_ipsum" target="_blank">

ผลลัพธ์ครับ ลองคลิกดูได้

อีกปุ่ม ผมดัดแปลงบางอย่างครับ ลองคลิกดู

Button

แต่ถ้าเป็นแบบเป็นปุ่มพวกส่งข้อมูล แบบแถบ Google ข้างบนบล็อกเนี่ย ใช้คนละ Element ครับ

เราจะไม่ใช้ Element img แต่เราจะใช้ input ครับ

โดยเป็น input ประเภท image ครับ

ตัวอย่างโค้ดครับ

Tags: hover, html, javascript, rollover16 Comments

ขอบคุณมากนะครับ

เข้าห้องนี้ทีไร มีแต่ความรู้น้อ

#1 By :::อะกรูบี้ อเหกิฟลอฟ::: on 2008-10-07 17:42

อย่างนี้ต้องเอาไปเล่น...

อ่ะจ๊ากก

ให้ดาวด้วย หุหุหุ Hot!

(แหล่มไปเลย) confused smile

#2 By robocon on 2008-10-07 18:05

แหม ๆ คนรุ่นหลังเขาทำอะไรเก่งมากขึ้นนะ

ต้องเอาไปใช้ซะแล้ว confused smile

#3 By Kefron Kerina on 2008-10-07 19:00

โฮก...รู้สึกแก่ทันที sad smile

#4 By (^_^)/nana on 2008-10-07 19:39

ดูหรูขึ้นมาทันที confused smile

#5 By Googigg on 2008-10-07 23:58

พลังในการเขียนเอนทรีนี้ เต็มที่จริงๆ

#6 By ch_a_m_p on 2008-10-08 02:31

JavaScript , DOM , AJAX ทำไมพี่ไม่เคยได้ยินไอ้ภาษาพวกนี้เลยแหะ รู้จักแค่ JavaScript sad smile

แต่ก็แจ่มดีครับ ว่างๆจะเอาไปปรับใช้มั่ง open-mounthed smile

#7 By NOT_KUNG on 2008-10-08 08:39

DOM น่าจะเป็นส่วนหนึ่งของ AJAX ส่วน AJAX ไม่ใช่ภาษาครับ เป็นเทคนิคการเขียนโปรแกรมที่นำ JavaScript + ภาษาเว็บแอพพลิเคชันครับ big smile

#8 By xViStA on 2008-10-08 11:17

ขอเวลาศึกษาสัก.... นานๆ

ว่าแต่ JavaScript กับ html มันเหมือนกันมั๊ยอ่ะหรือต่างกันอย่างไร
embarrassed

#9 By 0aziz on 2008-10-08 21:54

#9 ต่างกันโดนสิ้้นเชิงครรับ แต่มันก็ค่อยๆ กลมกลืน กลมกลืน กลมกลืน ....
HTML โครงสร้างภาษาคล้ายกับ XML (ภาษาแท็ก)
JavaScript โครงสร้างคล้ายภาษาซี (ภาษาปีกกา)

#10 By xViStA on 2008-10-08 22:08

Java Script เรียนรู้ยากมาก

JQuery ใช้เวลาเรียนรู้น้อยกว่า เขียนโค็ดได้สั้นกว่าด้วย

JQuery version

<script type="text/javascript">
$(window).ready(function() {
$("img").mouseover(function() {
$(this).attr("src","hover.gif");
});
$("img").mouseout(function() {
$(this).attr("src","out.gif");
});
});
</script>