Zooming in on Images with JavaScript - Developing a basic front-end
(Page 2 of 4 )
As I stated in the introduction of this tutorial, the first step that I’m going to take toward the development of a JavaScript application that will be capable of zooming in and out a concrete bitmapped image will consist of building a simple front-end. This will be handy for placing the image that will be manipulated later into the respective web page.
Now have a look at the signature of the following (X)HTML file, which displays two simple containing DIVs on the browser. As you’ll see, the first one will be responsible for housing the sample image that will be zoomed in and out via JavaScript. The second one will include a pair of web form buttons for implementing a primitive control panel.
The corresponding code sample is as follows:
<!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</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>
</head>
<body>
<h1>Zooming images with JavaScript</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 signature corresponding to the above (X)HTML file is indeed very easy to grasp. As I stated before, this file includes two main DIVs. The first one, which is identified as “container,” wraps the sample image to be zoomed in and out, and the last one acts merely like a containing element for the controls that will perform the pertinent zooming process on the target image. Not too difficult to understand, right?
In addition, I styled this pair of containing DIVs, which results in a web document that has the following visual presentation:
/Zooming_JavaScript(1)_img1.jpg)
As illustrated by the previous screen shot, the front-end that corresponds with the zooming JavaScript application is very primitive, so you shouldn’t have major problems understanding how it works.
So far, so good. At this moment everything has been set up correctly. It’s time to leap forward and start coding the respective JavaScript functions that will be tasked with zooming in and out of the previous sample image via the respective zoom controls. Things are getting really exciting now!
However, to see how these brand new JavaScript functions will be created, you’ll have to click on the link that appears below and keep reading.
Next: Defining a couple of handy JavaScript functions >>
More JavaScript Articles
More By Alejandro Gervasio
/ 2 
AT&T devCentral & BlackBerry(r) Webcast Series: BlackBerry and GPS -Build Location Awareness into your BlackBerry Applications, July 10th -1:00PM EST. 
