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:
/Zooming_JavaScript(4)_img1.jpg)
/Zooming_JavaScript(4)_img2.jpg)
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. |
