Building Image Zooming Controls with the DOM for JavaScript

According to the concepts deployed in the previous section, it's necessary to define yet another JavaScript function that will be responsible for building the pair of zoom controls that were initially included into the zooming application's structural markup. From a strict point of view, this approach is much more standard and allows this application to degrade gracefully if scripting is disabled on the browser.

Having explained why it's better to build the respective zoom controls, this is the signature of the function that appends them dynamically to the web document tree:

function buildZoomPanel(){

var div=document.createElement('div');

div.setAttribute('id','controlpanel');

var btnplus=document.createElement('input');

btnplus.setAttribute('type','button');

btnplus.setAttribute('value','+');

var btnminus=document.createElement('input');

btnminus.setAttribute('type','button');

btnminus.setAttribute('value','-');

div.appendChild(btnplus);

div.appendChild(btnminus);

document.getElementsByTagName('body')[0].appendChild(div);

btnplus.onclick=function(){ZoomInElement('image',20,800)};

btnminus.onclick=function(){ZoomOutElement('image',20,263)};

}

As you can see, the above "buildZoomPanel()" JavaScript function performs some useful tasks, such as creating the zoom buttons that are added to the web page by using some common DOM methods. Also, after these buttons are built, they are tied via two "onclick" event handlers to the respective "ZoomInElement()" and "ZoomOutElement()" functions that you learned before.

And finally, the previous function should be called up in the following way after the web page has been loaded:

// display zoom panel when web page is loaded

window.onload=function(){

if(document.getElementById&&document.getElementsByTagName&&document.createTextNode){

buildZoomPanel();

}

}

Not too difficult to grasp, right? At this point, the zooming application has been improved in many different ways, since it now has the capacity to perform a pretty realistic zooming effect on any number of bitmapped images. It also builds the corresponding zoom panel by using the DOM.

Of course, if you want to work with multiple images, you should slightly modify the signature of the previous "buildZoomPanel()" function to create one panel for each of the targeted graphics. This should be a no-brainer task that you can tackle with minor hassles.

So far, so good. At this stage, you hopefully learned how the prior "buildZoomPanel()" function works, so it's time to see how it can be linked with the other modules of this image zooming application. This will complete its development.

As you may guess, this integration process will be tackled in the section to come, thus click on the link that appears below and keep reading.