Zooming in on Images with JavaScript - Attaching the JavaScript functions to the zooming controls
(Page 4 of 4 )
As I explained in the previous section, to complete the development of this JavaScript-driven zooming application, it’s necessary to attach the pair of functions that I defined earlier to the respective zoom controls, in this case by using a couple of “onclick” event handlers.
This process must be performed after the pertinent web document has been loaded, which can be achieved in the following way:
window.onload=function(){
if(document.getElementById&&document.getElementsByTagName&&document.
createElement){
var btn1=document.getElementById('button1');
if(!btn1){return};
btn1.onclick=function(){
ZoomInImage();
}
var btn2=document.getElementById('button2');
if(!btn2){return};
btn2.onclick=function(){
ZoomOutImage();
}
}
}
Short and effective! Now the two zooming buttons will trigger each of the corresponding JavaScript functions each time they’re clicked, in this manner implementing a basic zooming mechanism, which on this specific occasion, targets only one image.
Also, in order to complement even more thoroughly the previous explanation, below I listed the complete source code corresponding to this JavaScript-based zooming application along with an additional screen shot that shows how the sample image is zoomed in when the appropriate control is clicked.
That being said, here’s the complete source code for this JavaScript application:
<!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 two different functions)</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 ZoomInImage(){
var img=document.getElementById('image');
if(!img){return};
img.setAttribute('width',parseInt(img.getAttribute('width'))+20);
img.setAttribute('height',parseInt(img.getAttribute('height'))+20);
if(!img.style.left){img.style.left='0px'};
if(!img.style.top){img.style.top='0px'};
img.style.left=parseInt(img.style.left)-10+'px';
img.style.top=parseInt(img.style.top)-10+'px';
}
function ZoomOutImage(){
var img=document.getElementById('image');
if(!img){return};
img.setAttribute('width',parseInt(img.getAttribute('width'))-20);
img.setAttribute('height',parseInt(img.getAttribute('height'))-20);
if(!img.style.left){img.style.left='0px'};
if(!img.style.top){img.style.top='0px'};
img.style.left=parseInt(img.style.left)+10+'px';
img.style.top=parseInt(img.style.top)+10+'px';
}
window.onload=function(){
if(document.getElementById&&document.getElementsByTagName&&document.
createElement){
var btn1=document.getElementById('button1');
if(!btn1){return};
btn1.onclick=function(){
ZoomInImage();
}
var btn2=document.getElementById('button2');
if(!btn2){return};
btn2.onclick=function(){
ZoomOutImage();
}
}
}
</script>
</head>
<body>
<h1>Zooming images with Javascript (uses two different functions)</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>
/Zooming_JavaScript(1)_img2.jpg)
That’s all for the moment. As I say in many of my articles on web development, you’re completely free to modify all of the code samples shown here. Thus, you can incorporate your own modifications to this basic image zooming application.
Final thoughts
In this first installment of the series, I showed you how to build a primitive zooming application with JavaScript, which in its current version works only with one target image. However, this limitation will be properly addressed in the next part, along with the incorporation of some other significant improvements.
Now that you’ve been warned, you won’t want 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. |
/ 2 
