Improving an Image Zooming Application with JavaScript - Listing the complete source code of the initial JavaScript zooming application
(Page 2 of 4 )
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">
<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 two different functions)</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 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 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 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 >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
