change image size on click using javascript

Question

I'm using ASP.NET,C# to develop my web app, I have a button (created as an image), when user clicks on this button, its size should be decreased for a small fraction of time and then it should return to its normal size again, how can I perform this effect? I've created a javascript function for button click and I want to do this effect using Javascript

thanks

Xmindz · Accepted Answer · 2012-09-01 04:30:32Z

1

Try the following:

HTML

<img src="images/someimage.jpg" onclick="handleClick(this)" style="width:100px"/>

JavaScript:

function handleClick(sender)
{ 
    var thisWidth=parseInt(sender.style.width.replace('px',''));

    sender.style.width=(thisWidth-10) + 'px';

    setTimeout(function(){
        sender.style.width=(thisWidth+10) + 'px';
    },500);
}

The image will decrease its size by 10px in its width as soon as it is clicked and will come back to its its normal size after 500ms.

Hope this will help you!

answered Sep 1, 2012 at 4:30

Xmindz

1,28013 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

change image size on click using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related