creating a button click effect - JQuery

Question

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?

You can actually just use CSS for this. See this post: stackoverflow.com/questions/6813699/css-change-image-on-click — J David Smith
– J David Smith, Commented Jul 17, 2013 at 23:33

dunnmifflsys · Accepted Answer · 2013-07-17 23:35:09Z

3

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!

answered Jul 17, 2013 at 23:35

dunnmifflsys

6213 gold badges9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dunnmifflsys Over a year ago

I'm glad to help. I would appreciate a check, both to stop other people from looking at this and help my abysmal reputation.

Sushanth -- · Accepted Answer · 2013-07-17 23:35:01Z

1

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' ;
    });

});

answered Jul 17, 2013 at 23:35

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

2 Comments

David Biga Over a year ago

Thanks :) I like @newbie's solution better though.

Sushanth -- Over a year ago

Glad to have helped :)

pirs · Accepted Answer · 2013-07-17 23:38:17Z

0

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>

answered Jul 17, 2013 at 23:38

pirs

2,4612 gold badges20 silver badges25 bronze badges

Collectives™ on Stack Overflow

creating a button click effect - JQuery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related