Home arrow JavaScript arrow Page 4 - Improving an Image Zooming Application with JavaScript
JAVASCRIPT

Improving an Image Zooming Application with JavaScript


Among the plethora of JavaScript applications that can be developed to extend the existing functionality of a web site, zooming into and out of bitmapped images is quite possibly one of easiest to build and implement. Thus, if you’re a web developer who’s interested in learning how to incorporate basic zooming capabilities into your own web applications, then don’t waste any more time. Start reading this article now!

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
March 11, 2008
TABLE OF CONTENTS:
  1. · Improving an Image Zooming Application with JavaScript
  2. · Listing the complete source code of the initial JavaScript zooming application
  3. · Shortening the JavaScript code
  4. · Listing the improved source code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials