Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating an Image viewer using JavaScript functions.

Author: DevASP
Download Source Code : 578_ImageViewer.zip

This article is about how you can give option for zoom in , zoom out and reset for images in your web page.

Steps you will do.

 

 

Start visual studio and create a new web application.

 

 

Open the HTML design of your web page and add the following HTML code and JavaScript functions to design the layout of your web page and zoom in , zoom out , reset the image using JavaScript functions.

 

 

<html>

<head>

<title>image viewer !</title>

 

<style type="text/css">

 <!-- body { margin: 5%; padding: 5%; font: 13px tahoma; color: #000000; background: #ffffff none; } h1 { color: #000ccc; background: #ffffff none; text-indent:5px; letter-spacing:-0.5mm; } a, a:visited { color: #0000ff; } a:hover { color: #ff0000; } -->

</style>

 

<script language="javascript" type="text/javascript">

 

    function zoom(type)

    {

    if (type=="in" ) {document.images["img"].width+=2;document.images["img"].height+=2;}

    if (type=="out") {document.images["img"].width-=2;document.images["img"].height-=2;}

    }

 

 

</script>

</head>

<body bgcolor="#009999">

<div align="center">

 

<div style="padding-right:3%;padding-left:3%;background:#eeeeee;padding-bottom:3%;font:13px tahoma, arial;width:350px;color:#000000;padding-top:3%;text-align:center">

 

<img name="img" style="border-right: #000c4c 3px solid; border-top: #000c4c 3px solid; border-left: #000c4c 3px solid; border-bottom: #000c4c 3px solid"

alt="" src="images.jpg" width="132" height="132"><br>

 

<a href="javascript:zoom('in')">zoom in</a> <big>|</big> <a href="javascript:zoom('out')">

zoom out</a> <big>|</big> <a href="javascript:location.reload()">reset</a>

<br>

<br>

</div>

</div>

<form action="#" method="get">

       <center>

       <h3>dont forget to visit www.devasp.om<br>

       <a href="http://www.devasp.com">www.devasp.com</a>

       </h3>

       </center>

</form>

</body>

</html>

 

Note you can also change the image. Just copy that image in the root directory of the project and add change the name in above code.

 

Run your application and check the opinions of zoom in, zoom out and reset.

 

 

 

 

 

 

Article Comments
I am working on image manipulation. I got a little problem there, but here on Devasp.net, I got a lot of stuff on image manipulation. which helps me very much.

Posted on 8/19/2006 8:18:13 AM by Raees

Creating an Image viewer using JavaScript functions.

Posted on 4/6/2007 2:17:45 AM by Senthil Kumar

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How We can see our Images through a Magnifying Glass.

Disclaimer - Privacy
© 2002-2017 DevASP.net