JAVASCRIPT

Building Image Zooming Controls with the DOM for JavaScript

Welcome to the final part of the series entitled “Zooming images with JavaScript.” In four different tutorials, this series demonstrates how to use some of the most common methods provided by JavaScript to build a highly modular client-side application that allows for decent zooming effects on multiple images in a web document.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

March 25, 2008

TABLE OF CONTENTS:

Before I proceed to modify the original structure of this JavaScript-driven zooming application, I'd like to list its complete source code as it was initially developed during the prior tutorial of the series. As you'll possibly recall, the original zooming script was composed of two primary JavaScript functions, called "ZoomInElement()" and "ZooomOutElement()" respectively. These functions were tasked with performing the pertinent zooming effects on certain images of a web page.

Having said that, here's how the entire source code of this zooming application looked:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Zooming images with JavaScript (targets any web page element)</title>

body{

padding: 0;

margin: 0;

background: #eee;

}

h1{

font: bold 14pt Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

}

img{

position: absolute;

}

#container{

position: relative;

width: 263px;

height: 150px;

margin-left: auto;

margin-right: auto;

overflow: hidden;

background: #9cf;

border: 1px solid #000;

}

#controlpanel{

width: 263px;

margin-left: auto;

margin-right: auto;

background: #9cf;

text-align: center;

border: 1px solid #000;

}

</style>

// 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';

}

window.onload=function(){

var btn1=document.getElementById('button1');

if(!btn1){return};

btn1.onclick=function(){

ZoomInElement('image',20,800);

}

var btn2=document.getElementById('button2');

if(!btn2){return};

btn2.onclick=function(){

ZoomOutElement('image',20,263);

}

</script>

</head>

<body>

<h1>Zooming elements with JavaScript (targets any web page element)</h1>

</div>

</body>

</html>

The above code sample demonstrates in a nutshell how to build an extensible JavaScript application that utilizes only a couple of basic functions to achieve the so-called zooming effects in a pretty realistic way.

In this case, I used two simple web form buttons that were included into the application's structural markup for the purpose of zooming into and out of a targeted image. But this approach isn't actually the best one to take, since it can't be considered completely standard. Of course, I'm saying this because JavaScript should be used to extend (not replace) the functionality of certain web page elements. This means that in this situation, the buttons in question should be displayed on the browser via the DOM, instead of utilizing conventional markup.

Thus, bearing this "purist" concept in mind, in the upcoming section of this tutorial, I'm going to define an additional JavaScript function that will be tasked with dynamically appending these zoom controls to the web document tree by using some DOM scripting.

To learn all the details of this process, jump ahead and read the next section. It's only one click away.

Next: Building zoom controls by using some DOM scripting >>