Working with Multiple Graphics for a Zoom Application in JavaScript - Listing the source code of the previous zooming application (Page 2 of 4 )
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zooming images with JavaScript (uses only one function)</title>
<style type="text/css">
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>
<script type="text/javascript">
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 id="container"><img src="sample_image.jpg" width="263" height="150" id="image" /></div>
<div id="controlpanel">
<p><input type="button" id="button1" value="+" /><input type="button" id="button2" value="-" /></p>
</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 >>
More JavaScript Articles
More By Alejandro Gervasio
