CODEWITHSUNDEEP
jquery
CJS
CJS

Reputation: 351

jQuery click effect

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.

Upvotes: 0

Views: 445

Answers (3)

Elliot Bonneville
Elliot Bonneville

Reputation: 53351

$(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.

Upvotes: 4

Luca Rocchi
Luca Rocchi

Reputation: 6484

$('div.search').click( function(){ return false; //depend on you return true or false the event is propagated } );

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

Not a problem. Here's your code with mine added.

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

    //added click function below
    $(".button").click(function() {
        //do click actions here
    });
});

Upvotes: 0

Related Questions