JAVASCRIPT

Improving an Image Zooming Application with JavaScript

Among the plethora of JavaScript applications that can be developed to extend the existing functionality of a web site, zooming into and out of bitmapped images is quite possibly one of easiest to build and implement. Thus, if you’re a web developer who’s interested in learning how to incorporate basic zooming capabilities into your own web applications, then don’t waste any more time. Start reading this article now!

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

March 11, 2008

TABLE OF CONTENTS:

Before I proceed to improve the general structure of this JavaScript-driven application, first I'd like to list its complete source code as it was defined in the first chapter of the series. In doing so, you'll be able to see a better comparison between this version and the one that I plan to develop later on.

Having clarified this important point, here's the complete definition of this image zooming application, which is comprised of some (X)HTML markup, a few simple CSS styles, and two main JavaScript functions:

<!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 (uses two different functions)</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>

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

}

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

}

window.onload=function(){

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

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

if(!btn1){return};

btn1.onclick=function(){

ZoomInImage();

}

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

if(!btn2){return};

btn2.onclick=function(){

ZoomOutImage();

}

</script>

</head>

<body>

<h1>Zooming images with JavaScript (uses two different functions)</h1>

</div>

</body>

</html>

As you can see, the previous image zooming application uses two primary JavaScript functions, called "ZoomInImage()" and "ZoomOutImage()" respectively, to apply a zooming effect on only one target image. In addition, these functions are triggered when one of the pertinent zooming controls is clicked on, in this way achieving a pretty real zoom effect.

Nonetheless, as I stressed before, the initial incarnation of this zooming application is rather redundant, since it utilizes a pair of JavaScript functions to perform the pertinent zooming in/out tasks, when this procedure can be tackled using only one function.

Bearing this in mind, in the upcoming section, I'm going to merge the two JavaScript functions that you learned previously into a single one, which will be responsible for performing the zooming in/out effects on a selected image.

To see how this will be done, please click on the link shown below and keep reading.

Next: Shortening the JavaScript code >>