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

Answer 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!