Improving an Image Zooming Application with JavaScript - Listing the improved source code
(Page 4 of 4 )
In consonance with the concepts that I deployed in the prior section of this tutorial, the only thing that remains undone is joining all the modules of this JavaScript-driven zooming application. In this manner, you can understand how they link with each other.
That being clarified, have a look at the signature of the following (X)HTML file, which as I said before, comprises the complete source code corresponding to this image zooming application. Here's how this file is defined:
<!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>
There you have it. At this point, I've provided you with the full source code required to get this JavaScript-driven zooming application working seamlessly. It's highly recommended that you study in detail the previous script and eventually introduce all the changes that you consider necessary into it to suit your personal needs and extend your existing skills in developing useful web applications with JavaScript.
The experience will hopefully be educational!
Final thoughts
In this second part of the series, I demonstrated through a few simple code samples how to improve the original behavioral layer of the image zooming application. I merged its two primary JavaScript functions into only one, making it a bit more compact and efficient.
However, as you may have noticed, the application's overall functionality is pretty limited, since it's only capable of zooming into and out of one image. Therefore, in the next tutorial of the series, I'm going to address the limitation by providing the application with the ability to work with multiple images.
Now that you know what the next article will be about, you don't have any excuses to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 3 
