|
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 : 678 Pageviews. |
|
 |
|
ฝากข้อความหลังไมค์
Rss Feed
ผู้ติดตามบล็อก : 1 คน [
ห่างหายไปหลายวัน..วันนี้หมามอมารายงานตัวแล้วคร๊าบบ