Question

I have this resizing script I got from an answer I found on SO.

<script type="text/javascript">
  function resizeImg(img)
  {
    var resize = 150;
    var origH  = 61;
    var origW  = 250;
    var mouseX = event.x;
    var mouseY = event.y;
    var newH   = origH * (resize / 100);
    var newW   = origW * (resize / 100);

    img.style.height = newH;
    img.style.width  = newW;

    var c = img.parentNode;

    c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
    c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
  }
</script>

It is located in the HEAD placeholder tag in my page.

In the same page, in the content placeholder, I have an <img> tag which needs to run the function above ‘onclick’.

Therefore, It needs to return ‘this’ like this:

<img src="someImage.jpg" alt="" onclick="resizeImg(this)" />

However, this doesn’t work. I have no idea how to do this and I tried searching google for some time now but nothing came up.

Answer 1

Not sure from where you have copied the source. I suspect event.x, event.y – shouldn’t you be using clientx and clienty properties. Besides, for cross-browser, you need to manage the event reference and image element can be obtained from event object’s target.

Anyway, try out modified code as below:

<script type="text/javascript">

    function resizeImg(e)   {     
        var event = window.event || e;
        var img = event.target || event.srcElement;
        var resize = 150;     
        var origH  = 61;     
        var origW  = 250;     
        var mouseX = event.clientX;     
        var mouseY = event.clientY;     
        var newH   = origH * (resize / 100);     
        var newW   = origW * (resize / 100);      
        img.style.height = newH + 'px';     
        img.style.width  = newW + 'px';      
        var c = img.parentNode;      
        c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;     
        c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;   
}

</script>
<div>
<img src="someImage.jpg" alt="" onclick="resizeImg(event)" />
</div>

I have created the jsfiddle for the same.

Lastly, consider using productivity library such as jquery which will make things a lot simpler.