
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM

Search Site:

Home » DHTML » Article

DHTML Zoom In and Out Script

Article by:

Premshree Pillai (8/28/2002)

	Add to Favourites
	Tell a friend

Summary:

Using zoOom, you can zoom in and zoom out any image that is specified in the code.

Viewed: 57337 times

Rating (73 votes):

2.9 out of 5

Rate this Article

Read Comments

Post Comments

DHTML Zoom In and Out Script

View Live Demo

Using zoOom, you can zoom in and zoom out any image that is specified in the code.

zoOom is very easy to customise. You can change the image, it's position. You can also set the maximum and minimum allowable widths. You can change the zoom speed. For customising, make changes in the 'configure' section of the script.

Begin by pasting the following into the head of your script:

Select All Code


<script language="javascript">

// zoOom 1.0
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// premshree@hotmail.com
// Loaction of this script :
// http://www.qiksearch.com/javascripts/zooom10.htm
// Visit http://www.qiksearch.com/javascripts.htm for more FREE scripts


// Configure zoOom

//-----------------------------------------------------------------
var img_path="zooom10.gif"; // The Image Path                     |
var top_pos=130;          // Image position from top              |
var left_pos=162;         // Image position from left             |
var max_width=900;        // Max allowable width                  |
var min_width=10;         // Min allowable width                  |
var time_length=1;        // Zoom delay in milliseconds           |
var step=2;               // Pixels by which image should zoomm   |
//-----------------------------------------------------------------

document.write('<div id="q_div" style="position:absolute; top:' + top_pos + '; left:' + left_pos + '"><img src="' + img_path + '" border="3" bordercolor="#000000" name="z" alt="zoOom"></div>');

img_act_width=z.width;
img_act_height=z.height;
var original_time=time_length;

function zoom_out()
{
 if(z.width==0)
  {
   z.border=0;
  }
 if(z.width!=0)
  {
   if(z.width>min_width)
   {
    z.width-=step;
    z.height=Math.round(z.width*((img_act_height)/(img_act_width)));
    setTimeout("zoom_out()",time_length);
   }
   else
   {
    window.alert('Width less than Minimum Width\n© Qiksearch zoOom.');
   }
  }  
} 

function zoom_in()
{
 if(z.width==0)
  {
   z.border=0;
  }
 if(z.width!=0)
  {
   if(z.width<max_width)
   {
    z.width+=step;
    z.height=Math.round(z.width*((img_act_height)/(img_act_width)));
    setTimeout("zoom_in()",time_length);
   }
   else
   {
    window.alert('Maximum Width exceeded\n© Qiksearch zoOom.');
   }
  }  
} 

function resume_zoom()
{
 time_length=original_time;
}

function pause_zoom()
{
 time_length=10000000000;
}

function set_original()
{
 z.width=img_act_width;
 z.height=img_act_height;
}

</script>

Now here are the buttons to control the image:

Select All Code

<!--BEGIN ZOOM LINKS-->
<table cellspacing="10" cellpadding="10" align="center"><tr>
<td style="border:3 solid #000000" align="middle"><a href="#" onmouseover="javascript:resume_zoom();zoom_in();" onmouseout="javascript:pause_zoom();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#003399; text-decoration:none"><font color="#808080">zoOom in</font> +</a></td>
<td style="border:3 solid #000000" align="middle"><a href="#" onmouseover="javascript:resume_zoom();set_original();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#000000; text-decoration:none">original</a></td>
<td style="border:3 solid #000000" align="middle"><a href="#" onmouseover="javascript:resume_zoom();zoom_out();" onmouseout="javascript:pause_zoom();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#003399; text-decoration:none"><font color="#808080">ZOoOM out</font> -</a></td>
</tr></table>
<!--END ZOOM LINKS-->

Useful Links

Fat Cow Hosting

FatCow Review

Advertise here

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'DHTML Zoom In and Out Script'

Posted by : Archive Import (Nick) at 15:56 on Sunday, October 20, 2002

Installation instructions very confusing to mee.

Posted by : Archive Import (Tony) at 00:53 on Tuesday, December 10, 2002

Thanks Premshree,
For a Zooming start.

Posted by : Archive Import (Diogo) at 08:45 on Wednesday, May 14, 2003

Hi there, I under if you will receive this email because the last post was in 2002.
Any way I tried to use this script and it looks to work fine but there is a bug. Maybe not in the script but in windows 2000 or Wxp.
Someone told me that it may be a cash problem in windows or IE.
The problem is, if you try to apply the zoom to an image, and if you never open that image before and I say again never before. It will distort de image. Once you reload the page or refresh it, the problem is gone.
I tried to solve that with auto refresh once the page is loaded, but if you are working in a page with no frames, that is quit difficult or impossible because it results in an infinite loop.
Is there any solution???

Posted by : Archive Import (Diogo) at 08:54 on Wednesday, May 14, 2003

I used big images like w=550px and h=700px.
One more thing. It does not work in Netscape or Opera.
Maybe because of the java tags?

Posted by : Archive Import (elephant) at 00:08 on Saturday, June 14, 2003

No way I can figure out how to get the image whereit is suposed to be in the script. In the <a href="#"> If so - doesn't work

Posted by : Archive Import (Annie) at 01:42 on Monday, August 25, 2003

I was wondering if I could get the codes for changing your mouse to this (+) please!

Posted by : newbie2007 at 18:59 on Sunday, December 31, 2006

is it possible to make turn the image into a link? i want to be able to zoom in and out, and be able to click on the image.

To post comments you need to become a member. If you are already a member, please log in .

RELATED ARTICLES
Simple Thumbnail Browsing Solution by Troy Wolf This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets.

Creating CSS Buttons by Thomas D. Greer With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript.

DHTML Javascript Ticker by Premshree Pillai This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature.

DHTML Horizontal Scroller by Premshree Pillai Scroll text horizontally when the user hovers over a link.

Manipulate Scrollbar Colors Using CSS and JavaScript by Mike Thompson The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!

DHTML News Bar by Premshree Pillai This is the News Bar script which displays a number of messages and rotates them using DHTML.

DHTML Scrolling Image by Premshree Pillai Using this script the user can scroll an image left or right by clicking a buttong

DHTML Zoom In and Out Script by Premshree Pillai Using zoOom, you can zoom in and zoom out any image that is specified in the code.

DHTML Image Zoom Out by Premshree Pillai Click on the image and it zooms out and disappears. This script could be a way to handle advertising or other images.

Simple Mouse Trail using VB Script by Jeff Anderson With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch.

Recent Forum Threads

•	C++
•	Re: refresh parent after closing pop up window
•	Dynamic Insertion
•	Date and Time function around the world???
•	Significant Factors
•	Perl array access
•	Re: huffman encoding and decoding in C++...
•	Perl One Liner: Replace {(
•	Re: html including php, accessing the functions

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

submit a link - privacy - contact - advertise - hot links - link to us - submit your article