Building Image Zooming Controls with the DOM for JavaScript - The previous version of the image zooming application
(Page 2 of 4 )
Before I proceed to modify the original structure of this JavaScript-driven zooming application, I'd like to list its complete source code as it was initially developed during the prior tutorial of the series. As you'll possibly recall, the original zooming script was composed of two primary JavaScript functions, called "ZoomInElement()" and "ZooomOutElement()" respectively. These functions were tasked with performing the pertinent zooming effects on certain images of a web page.
Having said that, here's how the entire source code of this zooming application looked:
<!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 (targets any web page element)</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">
// zoom in a selected web page element
function ZoomInElement(id,inc,maxWidth){
var elem=document.getElementById(id);
if(!elem||elem.getAttribute('width')>=maxWidth){return};
elem.setAttribute('width',parseInt(elem.getAttribute('width'))+inc);
elem.setAttribute('height',parseInt(elem.getAttribute('height'))+inc);
if(!elem.style.left){elem.style.left='0px'};
if(!elem.style.top){elem.style.top='0px'};
elem.style.left=parseInt(elem.style.left)-(inc/2)+'px';
elem.style.top=parseInt(elem.style.top)-(inc/2)+'px';
}
// zoom out a selected web page element
function ZoomOutElement(id,inc,minWidth){
var elem=document.getElementById(id);
if(!elem||elem.getAttribute('width')<=minWidth){return};
elem.setAttribute('width',parseInt(elem.getAttribute('width'))-inc);
elem.setAttribute('height',parseInt(elem.getAttribute('height'))-inc);
if(!elem.style.left){elem.style.left='0px'};
if(!elem.style.top){elem.style.top='0px'};
elem.style.left=parseInt(elem.style.left)+(inc/2)+'px';
elem.style.top=parseInt(elem.style.top)+(inc/2)+'px';
}
window.onload=function(){
var btn1=document.getElementById('button1');
if(!btn1){return};
btn1.onclick=function(){
ZoomInElement('image',20,800);
}
var btn2=document.getElementById('button2');
if(!btn2){return};
btn2.onclick=function(){
ZoomOutElement('image',20,263);
}
}
</script>
</head>
<body>
<h1>Zooming elements with JavaScript (targets any web page element)</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>
The above code sample demonstrates in a nutshell how to build an extensible JavaScript application that utilizes only a couple of basic functions to achieve the so-called zooming effects in a pretty realistic way.
In this case, I used two simple web form buttons that were included into the application's structural markup for the purpose of zooming into and out of a targeted image. But this approach isn't actually the best one to take, since it can't be considered completely standard. Of course, I'm saying this because JavaScript should be used to extend (not replace) the functionality of certain web page elements. This means that in this situation, the buttons in question should be displayed on the browser via the DOM, instead of utilizing conventional markup.
Thus, bearing this "purist" concept in mind, in the upcoming section of this tutorial, I'm going to define an additional JavaScript function that will be tasked with dynamically appending these zoom controls to the web document tree by using some DOM scripting.
To learn all the details of this process, jump ahead and read the next section. It's only one click away.
Next: Building zoom controls by using some DOM scripting >>
More JavaScript Articles
More By Alejandro Gervasio
