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

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

มันคือ Rollover ครับ

 

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

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

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

 

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

 

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

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

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

 

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

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

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

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

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

 

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

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

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

 

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

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

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

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

 

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

 

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

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

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

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

 

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

ดูนี่ครับ..

Button

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

 

และนี่...

Buttononmouseover="" 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://xvista.exteen.com/images/imagehost/computer/20081007/hover/out.gif"
  • ภาพ B คือภาพนี้

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

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

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

 

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

Button

 

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

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

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

  

 

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

Button

 

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

Button

 

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

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

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

 

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

 

 

 

 

 

Comment

Comment:

Tweet

ขอบคุณมากครับ มีประโยชน์มาก

#143 By เป็ดพะโล้วววว (101.51.92.232) on 2015-09-23 09:01

#142 By (121.163.94.26|148.251.91.38, 121.163.94.26) on 2015-04-07 00:44

#141 By (121.163.94.26|148.251.91.38, 121.163.94.26) on 2015-04-07 00:43

#140 By (121.163.94.26|148.251.91.38, 121.163.94.26) on 2015-04-07 00:43

#139 By (76.73.224.13|76.73.224.13) on 2015-03-20 15:11

#138 By (76.73.224.13|76.73.224.13) on 2015-03-20 15:08

#137 By (162.213.31.3|148.251.92.48, 162.213.31.3) on 2015-03-19 13:23

#136 By (162.213.31.3|148.251.92.48, 162.213.31.3) on 2015-03-19 13:22

#135 By (162.213.31.3|148.251.92.48, 162.213.31.3) on 2015-03-19 13:22

#134 By (103.232.129.22|148.251.92.48, 103.232.129.22) on 2015-03-18 13:20

#133 By (103.232.129.22|148.251.92.48, 103.232.129.22) on 2015-03-18 13:18

#132 By (103.232.129.22|148.251.92.48, 103.232.129.22) on 2015-03-18 13:17

Hi there! Someone in my Myspace group shared this site with us so I came to give it a appear. Im definitely loving the details. Im bookmarking and will likely be tweeting this to my followers! Outstanding blog and great style and style. bdfdkdckgckefdce

#131 By (89.97.34.21|148.251.91.38, 127.0.0.1, 89.97.34.21) on 2015-03-17 11:36

That alone wwas an egregious oversight on thheir own part, since dffbfffdfdfecbkk

#130 By (89.97.34.21|148.251.91.38, 127.0.0.1, 89.97.34.21) on 2015-03-17 11:35

I all the time used to read paragraph in news papers but now as I am a user of web thus from now I am using net for posts, thanks to web. dddbbgkgceeeeafb

#129 By (89.97.34.21|148.251.91.38, 127.0.0.1, 89.97.34.21) on 2015-03-17 11:35

#128 By (91.217.42.1|148.251.92.48, 91.217.42.1) on 2014-09-08 18:19

#127 By (91.217.42.1|148.251.92.48, 91.217.42.1) on 2014-09-08 18:18

#126 By (91.217.42.1|148.251.92.48, 91.217.42.1) on 2014-09-08 18:17

#125 By (179.179.103.85|148.251.91.38, 179.179.103.85) on 2014-08-19 19:54

#124 By (179.179.103.85|148.251.91.38, 179.179.103.85) on 2014-08-19 19:53

#123 By (179.179.103.85|148.251.91.38, 179.179.103.85) on 2014-08-19 19:51

#122 By (193.205.105.73|193.205.105.73) on 2014-08-16 14:07

#121 By (193.205.105.73|193.205.105.73) on 2014-08-16 14:07

#120 By (193.205.105.73|193.205.105.73) on 2014-08-16 14:06

#119 By (80.69.92.52|80.69.92.52) on 2014-08-09 14:01

#118 By (37.187.241.61|37.187.241.61) on 2014-08-07 09:35

#117 By (37.187.241.61|37.187.241.61) on 2014-08-07 09:34

#116 By (37.187.241.61|37.187.241.61) on 2014-08-07 09:34

#115 By (86.53.128.58|148.251.91.38, 86.53.128.58) on 2014-08-01 04:01

#114 By (86.53.128.58|148.251.91.38, 86.53.128.58) on 2014-08-01 04:00

#113 By (86.53.128.58|148.251.91.38, 86.53.128.58) on 2014-08-01 03:59

#112 By (150.254.191.80|150.254.191.80) on 2014-07-16 02:49

#111 By (150.254.191.80|150.254.191.80) on 2014-07-16 02:48

#110 By (150.254.191.80|150.254.191.80) on 2014-07-16 02:48

#109 By (103.243.128.24|148.251.91.38, 103.243.128.24) on 2014-07-07 12:49

#108 By (103.243.128.24|148.251.91.38, 103.243.128.24) on 2014-07-07 12:48

#107 By (103.243.128.24|148.251.91.38, 103.243.128.24) on 2014-07-07 12:47

#106 By (94.23.161.51|148.251.91.38, 94.23.161.51) on 2014-06-20 15:13

#105 By (94.23.161.51|148.251.91.38, 94.23.161.51) on 2014-06-20 15:02

#104 By (94.23.161.51|148.251.91.38, 94.23.161.51) on 2014-06-20 15:01

#103 By (46.16.226.10|178.63.0.194, 46.16.226.10) on 2014-06-20 10:09

Nice post. I was checking constantly this blog and I am impressed! Extremely useful information specially the last part kckkfcbkdfdddaec

#102 By (94.228.204.10|148.251.92.48, 94.228.204.10) on 2014-06-16 14:44

#101 By (67.17.219.20|67.17.219.20) on 2014-06-14 13:27

It is also possible that Zynga's chosen advertising network is to blame if we dcfgbddggdfgbgbe

#100 By (188.237.180.55|148.251.91.38, 188.237.180.55) on 2014-06-13 14:04

#99 By (188.237.180.55|148.251.91.38, 188.237.180.55) on 2014-06-13 14:01

#98 By (80.17.38.39|148.251.92.48, 80.17.38.39) on 2014-06-12 15:10

#97 By (80.17.38.39|148.251.92.48, 80.17.38.39) on 2014-06-12 15:08

#96 By (80.17.38.39|148.251.92.48, 80.17.38.39) on 2014-06-12 15:07

I simply couldn't depart your web site prior to suggesting that I actually loved the usual info a person supply for your guests? Is gonna be again continuously in order to check up on new posts. bcgbdfaeccebgeba

#95 By (119.252.160.34|148.251.92.48, 119.252.160.34) on 2014-06-08 20:38

Thanks so much for the article.Much thanks again. Great.

#94 By (212.175.223.218|85.17.205.213, 212.175.223.218) on 2014-06-04 21:03

Recommend