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 อย่างนี้ไม่ได้ครับ
tag : jquery, jquery hover button, menu hover, button hover, jquery mouse hover
