Zooming in on Images with JavaScript

Simply put, the zooming JavaScript application that I plan to build here will be comprised of two primary functions. The first function will be responsible for zooming in the target image that you saw earlier, while the second one will zoom out.

Having explained how these JavaScript functions are going to work, I suggest you look at their respective signatures, which are shown below:

// define ‘ZoomInImage()’ function

function ZoomInImage(){

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

if(!img){return};

img.setAttribute('width',parseInt(img.getAttribute('width'))+20);

img.setAttribute('height',parseInt(img.getAttribute('height'))+20);

if(!img.style.left){img.style.left='0px'};

if(!img.style.top){img.style.top='0px'};

img.style.left=parseInt(img.style.left)-10+'px';

img.style.top=parseInt(img.style.top)-10+'px';

}

// define ‘ZoomOutImage()’ function

function ZoomOutImage(){

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

if(!img){return};

img.setAttribute('width',parseInt(img.getAttribute('width'))-20);

img.setAttribute('height',parseInt(img.getAttribute('height'))-20);

if(!img.style.left){img.style.left='0px'};

if(!img.style.top){img.style.top='0px'};

img.style.left=parseInt(img.style.left)+10+'px';

img.style.top=parseInt(img.style.top)+10+'px';

}

As shown previously, the above JavaScript functions, which I called “ZoomInImage()” and “ZoomOutImage()” respectively, were defined in such a way that they’re capable of performing a simple zoom in/out effect on the sample image that you saw earlier, which in this case was identified as “image.”

Of course, as you can see, the programming logic implemented by these functions is actually very simple to grasp. Basically, it’s based upon dynamically changing the respective “width” and “height” attributes of the targeted image via the popular (although non-standard) “style” object.

In addition, you should notice that each of the prior functions achieve the zooming effect by modifying the width and height attributes of the selected image at predefined increments and decrements of 10px each, all while maintaining the image in question completely centered within its respective container. This last task is performed by altering the image’s top and left coordinates, in this way implementing a simple –yet effective – zooming mechanism.

All right, at this point I firmly believe that you've grasped how the two previous JavaScript functions do their things. Thus, my next move will be to attach the  functions to the respective zoom controls that you saw earlier, so each time they’re clicked on, the image in question will be enlarged or reduced in increments of 10px.

To see how those zooming controls will be turned into fully-functional elements, you’ll have to jump forward and read the last section of this tutorial. Don’t worry, I’ll be there, waiting for you.