Question

Hi everyone I am currently designing a button that changes to another image when the user hovers over it.

$(document).ready(function(){
    $(".button").hover(function() {
        $(this).attr("src","button-hover.png");
    }, function() {
        $(this).attr("src","button.png");
    });
});

I was just wondering how would I add a third “click” feature i.e. when the user clicks on the image it changes to another image. Thanks in advance.

Answer 1

$(function(){
    $(".button").hover(function() {
        $(this).attr("src","button-hover.png");
            }, function() {
        $(this).attr("src","button.png");
    }).click(function() {
        $(this).attr("src","button-click.png");
    });
});

Assuming you want your button to change images when clicked, like you do upon hover. Also assuming you have a file called button-click.png.