Thursday, June 4, 2009

jquery - Create rollover image buttons | make rollover image buttons from single function using jquery

//make a duplicate image of each jpg or png and add "_over" behind the filename. Inside the img tag, put class name as "button" png button, and "jpgBtn" for normal jpg buttons

$(document).ready(function() {

if (!$.browser.msie || ($.browser.msie && $.browser.version > 6)) { //if not ie6 png buttons
//png button
$("img.button").hover(
function () {
ori = $(this).attr("src").split(".png");
src = ori[0];
$(this).attr("src",src + "_over.png");
},
function () {
$(this).attr("src",src + ".png");
}
);
}

//jpg button
$("img.jpgBtn").hover(
function () {
ori = $(this).attr("src").split(".jpg");
src = ori[0];
$(this).attr("src",src + "_over.jpg");
},
function () {
$(this).attr("src",src + ".jpg");
}
);

});

No comments: