CODEWITHSUNDEEP
jquery
David Biga
David Biga

Reputation: 2801

creating a button click effect - JQuery

I was wondering on how I could go about recreating a button pressed effect using JQuery.

My ideas where to use a event for mouse click to change image to pressed image and than after mouse releases, return back to original image. What are you thoughts or ideas on ways I could accomplish this?

Upvotes: 3

Views: 4582

Answers (3)

pirs
pirs

Reputation: 2463

What do you want exactly ? something like this is the way ...

$('btn-img').click(function(){
   var img =  $(this).children('img'); // return object of inner img
   // your event on current img with click
}).mouseleave(function(){
   // other event on mouseleave
});

Html : 

<a class="btn-img">
    <img src="yourImage.jpg" />
</a>

Upvotes: 0

dunnmifflsys
dunnmifflsys

Reputation: 621

That should work. The code would be:

$("#button").mousedown(function(){
$("#img").attr("src", "img2.jpg");
})
$("#button").mouseup(function(){
$("#img").attr("src", "img1.jpg");
}

Hope this helps!

Upvotes: 3

Sushanth --
Sushanth --

Reputation: 55750

Have the image listen to the click event and change the source of the image.

$('img').on('click', function() {
    var $this = $(this);

    $this.attr('src', function(i, src) {
        return src === 'something' ? 'somethingelse' : 'something' ;
    });

});

Upvotes: 1

Related Questions