Working with Multiple Graphics for a Zoom Application in JavaScript

In the previous section of this tutorial, I pointed out that the current incarnation of this image zooming application had some important limitations, such as the inability to work with multiple bit-mapped graphics. Indeed, this issue can be easily addressed by introducing some modifications to the business logic implemented through its respective behavioral layer (the JavaScript code, in other words).

Below I defined two brand new JavaScript functions, which, when used in conjunction, implement an effective mechanism for zooming different graphics included in a given web page.

Please study the respective signatures corresponding to the aforementioned functions, which look like this:

// zoom in a selected web page element

function ZoomInElement(id,inc,maxWidth){

 var elem=document.getElementById(id);

 if(!elem||elem.getAttribute('width')>=maxWidth){return};

elem.setAttribute('width',parseInt(elem.getAttribute('width'))+inc);

elem.setAttribute('height',parseInt(elem.getAttribute('height'))+inc);

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

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

elem.style.left=parseInt(elem.style.left)-(inc/2)+'px';

elem.style.top=parseInt(elem.style.top)-(inc/2)+'px';

}

// zoom out a selected web page element

function ZoomOutElement(id,inc,minWidth){

 var elem=document.getElementById(id);

 if(!elem||elem.getAttribute('width')<=minWidth){return};

elem.setAttribute('width',parseInt(elem.getAttribute('width'))-inc);

elem.setAttribute('height',parseInt(elem.getAttribute('height'))-inc);

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

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

elem.style.left=parseInt(elem.style.left)+(inc/2)+'px';

elem.style.top=parseInt(elem.style.top)+(inc/2)+'px';

}

After studying the definitions of the above JavaScript functions, you'll have to agree with me that they're  quite easily grasped. As you can see, the functions in question accept  the ID of the image being zoomed into and out of as its respective input argument along with the pertinent incremental and decremental values that will be applied to the image's width and height attributes.

And finally, both functions also take up the minimum and maximum values that should be assigned to the mentioned attributes so the zooming effect can be applied within a predefined range. Pretty easy to follow, isn't it?

All right, at this point I've built a brand new pair of JavaScript functions, which not only have been provided with the capacity to zoom any image included in a web document, but with the ability to perform this visual effect within a predefined range of increment and decrement values.

Now that you've hopefully learned how the two previous JavaScript functions do their thing, I believe that it's time to see how the functions can be linked with the rest of the modules that comprise this image zooming application.

Want to find out how this integration process will be achieved? Great! All you have to do is to click on the link shown below and read the next few lines.