Search code examples
javascripthtmlanimationdelay

Javascript delay/resizing

Hi i want to shrink and image and then resize it while keeping it in the same place(centerd in the page) i would like to do this using javascript. I want this to happen on a onclick event. If you need to see my code its here http://cannonmc.net/ .

For more of an idea of what i want/need look at http://orteil.dashnet.org/cookieclicker/ i want to do the same to my image as what happens when you hover/click on that cookie :).

Thanks

Luke.

Solution

  • I made a very simple example for you, I hope this helps.

    var image = document.getElementById('image');

image.onmousedown = function() {
    image.style.width = "47%";
};
image.onmouseup = function() {
    image.style.width = "";
}

    Would be all JavaScript needed, with the additional CSS. Working example here: http://jsfiddle.net/zy96xqc7/2/