Home arrow JavaScript arrow Page 4 - Building Image Zooming Controls with the DOM for JavaScript
JAVASCRIPT

Building Image Zooming Controls with the DOM for JavaScript


Welcome to the final part of the series entitled “Zooming images with JavaScript.” In four different tutorials, this series demonstrates how to use some of the most common methods provided by JavaScript to build a highly modular client-side application that allows for decent zooming effects on multiple images in a web document.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
March 25, 2008
TABLE OF CONTENTS:
  1. · Building Image Zooming Controls with the DOM for JavaScript
  2. · The previous version of the image zooming application
  3. · Building zoom controls by using some DOM scripting
  4. · Source code for the image zooming application

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building Image Zooming Controls with the DOM for JavaScript - Source code for the image zooming application
(Page 4 of 4 )

As I stated in the section you just read, below I listed the definitive source code corresponding to this JavaScript-driven zooming application. This time it will incorporate all of the improvements that were progressively implemented during the previous tutorials of the series:


<!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: #fff;

}

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;

padding: 10px 0 10px 0;

margin-left: auto;

margin-right: auto;

background: #9cf;

text-align: center;

border: 1px solid #000;

}

</style>

<script type="text/javascript">

// zoom in 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 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';

}

// build zoom panel

function buildZoomPanel(){

var div=document.createElement('div');

div.setAttribute('id','controlpanel');

var btnplus=document.createElement('input');

btnplus.setAttribute('type','button');

btnplus.setAttribute('value','+');

var btnminus=document.createElement('input');

btnminus.setAttribute('type','button');

btnminus.setAttribute('value','-');

div.appendChild(btnplus);

div.appendChild(btnminus);

document.getElementsByTagName('body')[0].appendChild(div);

btnplus.onclick=function(){ZoomInElement('image',20,800)};

btnminus.onclick=function(){ZoomOutElement('image',20,263)};

}

// display zoom panel when web page is loaded

window.onload=function(){

if(document.getElementById&&document.getElementsByTagName&&document.createTextNode){

buildZoomPanel();

}

}

</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>

</body>

</html>


That's all the source code required to implement this extensible zooming application on your own computer successfully. In addition, I also included a couple of screen shots that show how a sample image can be easily zoomed out using the application in question.

Here are the aforementioned screen shots:




Naturally, you're totally free to tweak all of the code samples developed in this tutorial, so that you can start building your own full-blown zooming application by utilizing this friendly guide. Happy coding!

Final thoughts

This is the end of the series. I hope you have enjoyed reading it as much as I did writing it, which would mean much to me. Besides, if you're a novice web developer who's taking their first steps into this fascinating terrain, you can learn the basics of how to build JavaScript applications that degrade gracefully when scripting is disabled on the browser.

See you in the next web development tutorial!


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
Find More JavaScript Tutorials

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 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials