jquery เมนู rollover แบบง่าย

jquery เมนู rollover แบบง่าย

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

โค้ดนี้เราจะใช้ jQuery นะครับ 

ตัวอย่างปุ่มแบบ rollover (DEMO)

สำหรับโค้ดไม่ยากครับมีแค่

$(document).ready(function() {  $(".rollover").hover(function() {     $(this).attr("src", $(this).attr("src").split(".").join("_rollover."));   }, function() {     $(this).attr("src", $(this).attr("src").split("_rollover.").join("."));   }); });

จากโค้ดนี้จะเห็นว่า รูปทั้งสองรูป ก่อน และหลัง mouse hover นั้น จะมีนามสกุลเดียวกัน โดยที่รูปที่แสดงจังหวะ mouse hover นั้นจะตามด้วย _rollover ตัวอย่างเช่น เมนูปกติ ผมให้แสดงรูป menu1.png แล้วเราก็สร้างอีกไฟล์ที่เป็นรูปแสดงตอนที่ mouse hover แล้วตั้งชื่อว่า menu1_rollover.png แค่นี้เองครับ ง่ายมากๆ ไม่ยากเลย

และรูปไหนที่เราต้องการให้แสดงเป็น menu เราก็กำหนดให้เป็น class ชื่อ rollover ก็เสร็จแล้วครับ

<img src="menu1.png" alt="menu hover" class="rollover" />

ชื่อไฟล์ของรูป จะต้องไม่มี dot นะครับ เช่น menu.1.png อย่างนี้ไม่ได้ครับ

Create: Modify : 2010-08-03 09:31:22 Read : 9535 URL :