JavaScript
  Home arrow JavaScript arrow Improving an Image Zooming Application wit...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Download TestComplete 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
IBM Rational Software Development Conference
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Improving an Image Zooming Application with JavaScript
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 3
    2008-03-11

    Table of Contents:
  • Improving an Image Zooming Application with JavaScript
  • Listing the complete source code of the initial JavaScript zooming application
  • Shortening the JavaScript code
  • Listing the improved source code

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    Iron Speed
     
    ADVERTISEMENT

    Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

    Improving an Image Zooming Application with JavaScript
    (Page 1 of 4 )

    Among the plethora of JavaScript applications that can be developed to extend the existing functionality of a web site, zooming into and out of bitmapped images is quite possibly one of easiest to build and implement. Thus, if you’re a web developer who’s interested in learning how to incorporate basic zooming capabilities into your own web applications, then don’t waste any more time. Start reading this article now!

    Welcome to the second part of the series "Image zooming with JavaScript." As its title clearly implies, this series walks you through the development of a highly modular JavaScript-driven application that implements an extensible behavioral layer aimed at providing existing web sites with the capability of zooming into and out of some of its embedded bitmapped images.

    Now that you know what this series is about, it's time to rehash the topics that were covered in the previous tutorial. This will give you a better idea of how that article and this one fit together. All right, having said that, you'll surely recall that during the first installment of the series, I built a couple of JavaScript functions whose primary task was performing a basic zoom in/out effect on a unique targeted image.

    You'll also remember that the zooming in/out effect was handled by a pair of simple controls built by way of two web form buttons. This mechanism can undoubtedly be improved, but not at this very moment.

    Nonetheless, it's perfectly worthwhile to mention that the zooming controls in question were directly included in the pertinent web document. It used some basic structural markup, which is certainly a questionable and rather clumsy approach since these controls should be created dynamically with DOM scripting. But since my plan consists basically of addressing one issue at a time, this one will be fixed in upcoming tutorials of the series.

    For now, in the next few lines I'm going to introduce some important improvements to its original structure to make the source code much shorter and more compact. Sounds really interesting, right?

    Well, having established the goal of this second article of the series, let's learn how to turn the source code of this JavaScript zooming application into a tight and clean piece of software. Let's begin this educational journey now!

    More JavaScript Articles
    More By Alejandro Gervasio


       · In the previous article, you saw how to zooming on bitmapped images with a simple...
     

    JAVASCRIPT ARTICLES

    - A Closer Look at Smart Markers with Yahoo! M...
    - Using Polylines and Smart Markers with Yahoo...
    - Bulleted Menu of Links
    - Creating Click Loggers and Basic Markers wit...
    - Adding Pan Controls to Yahoo! Maps
    - Adding Zoom Controls to Yahoo! Maps
    - Working with Yahoo! Maps
    - Building Image Zooming Controls with the DOM...
    - Working with Multiple Graphics for a Zoom Ap...
    - Improving an Image Zooming Application with ...
    - Zooming in on Images with JavaScript
    - JavaScript Date Objects: Universal Coordinat...
    - Javascript Objects: More Date Methods
    - JavaScript Objects: Dates
    - JavaScript Objects: Finishing Strings

    Iron Speed





    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway