Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Javascript Javascriptexamples JavaScript Zoom in and Zoom out

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript Zoom in and Zoom out

Advertisement
This page discusses - JavaScript Zoom in and Zoom out

JavaScript Zoom in and Zoom out 

       

This section illustrates you how to zoom in and zoom out of an image using JavaScript.

Here we are providing you an example to show the image effect. For this purpose, we have created three functions. The function zoomImage() and zoom() sets the height and width of the image and make it to show the effect Zoom In and Zoom Out. The function stopZoom() provides the functionality to stop the image effect by using the method clearInterval(). Here we have used Mouseover and Mouseout events to make the image zoom in and zoom out. As long as you put the cursor on the link Zoom In, the size of image will start increasing and if you put the cursor on link Zoom Out., the size of image will start decreasing.

Here is the code:

<html>
<h2>Zoom in and Zoom out</h2>
<script>
var zoomfactor=0.06;
function zoomImage(){
if (parseInt(cache.style.width)>8&&parseInt(cache.style.height)>8){
cache.style.width=parseInt(cache.style.width)+parseInt(cache.style.width)*zoomfactor*prefix
cache.style.height=parseInt(cache.style.height)+parseInt(cache.style.height)*zoomfactor*prefix
}
}
function zoom(originalWidth, originalHeight, img, state){
cache=eval("document.images."+img)
prefix=(state=="in")? 1 : -1
if (cache.style.width==""||state=="restore"){
cache.style.width=originalWidth+"px"
cache.style.height=originalHeight+"px"
if (state=="restore")
return
}
else{
zoomImage()
}
beginzoom=setInterval("zoomImage()",100)
}
function stopZoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}
</script>
<a href="" onmouseover="zoom(80,100,'image','in')" onmouseout="stopZoom()">Zoom In</a>
<a href="" onmouseover="zoom(100,40,'image','out')" onmouseout="stopZoom()">Zoom Out</a>
<p><img name="image" src="image.jpg"></p>
</html>

Zoom Out Effect:

Zoom In Effect:

Download Source Code:

 

       

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Discuss: JavaScript Zoom in and Zoom out  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com