Rollover Image แบบชิลๆ ด้วย JQuery

เรื่องของเพราะช่วงนี้มีโอกาส Re-Project ของโปรแกรมเมอร์ท่านอื่น ซึ่งระบบของเว็บนี้ก็สร้างไว้ประมาณ หลายปีแล้วล่ะ ที่ออฟฟิตก็จะมีโปรแกรมเมอร์ ไปๆ มาๆ หลายท่าน ทำให้โปรเจ็คถูกแก้ไขไปโดยโปรแกรมเมอร์หลายๆ คนเรื่อยเหมือนกัน ทำให้ระบบไม่นิ่ง ซึ่งนั่นก็คงเป็นเพราะแก้บ่อยนี่แหละ แล้วส่วนมากก็เป็นการเขียนโปรแกรมแบบเก่าอยู่ เวลามีการแก้ไขอะไรสักอย่างที บางครั้งถ้าไม่ดูให้ดี ก็มีผลกระทบกับอันอื่นๆ ตามมาอีก ทำให้ระบบมันทำงานไม่ได้อย่างที่ควรจะเป็นอีก

นอกจากต้องมาทำการ สร้างขึ้นมาใหม่แล้ว ยังต้องเพิ่มระบบ Back Office ขึ้นมาให้ลูกค้าอีกด้วย เพราะของเดิมไม่มีระบบนี้ จะอัพสินค้าทีแต่ละคอลเลคชั่นก็ต้องส่งมาให้ทางออฟฟิตเราเพิ่มเข้าไปให้ ซึ่งบางครั้งมันก็ทำให้งานล่าช้า เพราะต้องประสานงานกันมาหลายทอด คุณบอสจึงได้เสนอแนวทางแก้ปัญหาไปด้วยการทำระบบ Back Office ประสานเข้าไปในเวบ ให้ลูกค้าอัพเดทข้อมูล และติดตามข้อมูลได้สะดวกยิ่งขึ้น งานนี้ก็เลยมาถึงเรา

สำหรับตัวเราเองก็เป็นโปรแกรมเมอร์มือใหม่ ก็ยังเก้ๆ กังๆ แต่ทุกงานก็พยายามทำเต็มที่ มาโปรเจ็คนี้ก็ได้ลองจับตัวนี้ซักที เห็นที่เว็บอื่นมานานแล้ว ตอนเห็นก็คิดว่าอยากจะทำแบบนี้กับงานเราบ้าง แต่ไม่มีโอกาสสักที ก็เป็นอะไรที่ง่ายๆ นั่นแหละสำหรับคนอื่นๆ แต่เรามันฉลาดน้อย เลยไม่รู้ ^^

เมื่อ ก่อนเวลาจะทำ rollover image ทีก็ต้องเขียนจาวาสคริปต์ขึ้นมา สวอพอิน สวอพเอ้าท์กันไป ไอ้เราก็แค่นี้ บอกตรงๆ ว่าจาวาสคริปต์นี่ก็ไม่ได้เรื่องอะไรเลย แหะๆ <img src=//www.bloggang.com/emo/emo21.gif> งูๆ ปลาๆ มากๆ ปกติก็เลยไม่ชอบเขียนจาวาสคริปต์เท่าไหร่ ยกเว้นว่ามันเลี่ยงไม่ได้ อย่างเช่น งานบางอย่างมันน่าใช้ AJAX เราเองก็ต้องไปเสาะแสวงหาองค์ความรู้นั้นๆ จับมาใส่ในงาน แต่ให้นั่งแล้วเขียนไปเลยนี่ไม่ได้ๆ ^^ หรือต้องตรวจสอบค่าต่างๆ ที่ผู้ใช้งานป้อนเข้ามาอย่างนี้ อันนี้ก็ต้องใช้พี่ จาวาสคริปต์ เข้ามาช่วย ดีที่สิ่งเหล่านั้นมันยังไม่ซับซ้อนเท่าไหร่ คนด๋อยๆ อย่างเราเลยพอจะนำมาใช้ได้บ้าง

และครั้งนี้ เราก็พยายามเสาะแสวงหา กาทำ rollover image แบบที่ไม่ต้องไปปวดหัวกับการเขียน สวอพอิน สวอพเอ้าท์ แบบว่าขอแบบไหนก็ได้ ที่เขียนง่าย เข้าใจได้ดี เหมาะกับขี้หมูขี้หมาอย่างเราที่จะนำไปใช้ได้แบบบรึ๋ยๆ แล้วก็ได้วิธีดังกล่าวมาในที่สุด ^^


 


เริ่มต้นด้วยการใส่ ลิงค์สคริปต์ของ JQuery ไปที่สวน <head>...</head> ของไฟล์นั้นๆ ก่อน สำหรับตัว JQuery ก็อย่างที่รู้ๆ กัน โหลดเวอร์ชั่นล่าสุดจากเว็บของเจคิวรี่มาโลด ก็จะได้แบบนี้


<script src="jquery-1.4.4.js" type="text/javascript"></script>


 


ใส่โค๊ดที่ส่วน head อีกเช่นกัน ตัวนี้เป็นฟังก์ชั่นที่จะทำให้ภาพมันสลับกันได้ ^^


<script type="text/javascript">
      $(document).ready(function(){
            $('.rollover').hover(function() {      
                var currentImg = $(this).attr('src');
                $(this).attr('src', $(this).attr('hover'));
                $(this).attr('hover', currentImg);
            }, function() {
                var currentImg = $(this).attr('src');
                $(this).attr('src', $(this).attr('hover'));
                $(this).attr('hover', currentImg);
            });
      });
</script>


 


จากนั้น ในส่วนของ <body>............</body> เราก็เรียกใช้คลาส rollover กับแท็กภาพที่เราต้องการได้เลย


<img src="img1.jpg" width="100" border="0" hover="img1_hover.jpg" class="rollover"/>


 กรณี เราใช้กับ php ที่มีการดึงข้อมูลจาก ฐานข้อมูลมาโชว์ ก็เปลี่ยน im1.jpg และ img1_hover.jpg เป็นตัวแปรที่รับค่ามาแล้ว แค่นี้ก็ได้ละ Rollover Image





 

Create Date : 01 กุมภาพันธ์ 2554
5 comments
Last Update : 1 กุมภาพันธ์ 2554 14:23:11 น.
Counter : 236 Pageviews.

 

กระติ๊บคะ..สวัสดียามบ่ายค่ะ





ห่างหายไปหลายวัน..วันนี้หมามอมารายงานตัวแล้วคร๊าบบ

 

โดย: หัวใจแก้ว 1 กุมภาพันธ์ 2554 15:29:55 น.  

 


สวัสดีค่ะคุณกระติ๊บ..

อ้อมแอ้มพาคุณยายกะคุณหลานๆไปเที่ยวบางแสน

ทะเลบางแสนน้ำใส แต่เย็นมากๆค่ะ

ชายหาดนับวันจะแคบลงเรื่อยๆ..

น่าเสียดาย เขามีวางแผนถมทรายกันแล้วค่ะ

 

โดย: คนผ่านทางมาเจอ 1 กุมภาพันธ์ 2554 16:41:46 น.  

 

 

โดย: Megeroo 2 กุมภาพันธ์ 2554 16:21:56 น.  

 

มีความสุขกับเทศกาลดีๆแบบนี้จ้า
คลิกๆๆ รูปสวยๆน่ารักๆไว้ส่งต่อเพียบ...

 

โดย: pragoong 2 กุมภาพันธ์ 2554 18:19:58 น.  

 

คลิกที่รูป เพื่อเอาโค้ดรูปนี้ไปแปะ

สุขีวันปีกระต่ายค่ะ..

ขอให้เฮงๆรวยๆมีสุขภาพแข็งแรงนะค่ะ

 

โดย: คนผ่านทางมาเจอ 3 กุมภาพันธ์ 2554 10:55:57 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 


กระติ๊บริมทาง
Location :


[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 1 คน [?]




เป็นคนดีคนนึง ก็แค่นั้น อ่ะฮิ้วววว
Group Blog
 
<<
กุมภาพันธ์ 2554
 
 12345
6789101112
13141516171819
20212223242526
2728 
 
1 กุมภาพันธ์ 2554
 
All Blogs
 
Friends' blogs
[Add กระติ๊บริมทาง's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.