JAVASCRIPT

Working with Multiple Graphics for a Zoom Application in JavaScript

Welcome to the third installment of the series "Zooming out images with JavaScript." This set of educational tutorials guide you through the process of developing a highly modular JavaScript application that has the capacity to perform basic zoom in/out effects on a certain number of bit-mapped images previously included in a web document.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

March 18, 2008

TABLE OF CONTENTS:

A good way to demonstrate how the initial zooming application can be considerably improved to provide it with the capacity to work with more than one bit-mapped image involves listing its complete source code as it was developed in the preceding article of the series. In doing so, you'll be able to compare this version of the application with the one that I plan to build later on. Sounds pretty logical, right?

Having said that, have a look at the signature of the following (X)HTML file, which implements a fully-functional zooming effect on a predefined image:

<!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 only one function)</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 ZoomImage(inc){

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

if(!img){return};

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

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

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

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

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

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

}

window.onload=function(){

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

if(!btn1){return};

btn1.onclick=function(){

ZoomImage(20);

}

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

if(!btn2){return};

btn2.onclick=function(){

ZoomImage(-20);

}

</script>

</head>

<body>

<h1>Zooming images with JavaScript (uses only one function)</h1>

</div>

</body>

</html>

As shown earlier, the above code sample implements an extensible JavaScript application that performs a zooming in/out effect on a selected image. Of course, this task is carried out by the respective "ZoomImage()" function, which was actually discussed in detail in the previous tutorial, so I won't bore you with explaining how it works again.

So far, so good. At this stage you hopefully recall how the prior zooming application does its thing, even when it lacks the capacity to work with multiple images. Therefore, I think that it's time to introduce some crucial modifications to the pertinent JavaScript code to make it zoom in/out more than one graphic.

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

Next: Zooming into and out of multiple images >>