JavaScript
  Home arrow JavaScript arrow Building Image Zooming Controls with the D...
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 
 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

Building Image Zooming Controls with the DOM for JavaScript
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2008-03-25

    Table of Contents:
  • Building Image Zooming Controls with the DOM for JavaScript
  • The previous version of the image zooming application
  • Building zoom controls by using some DOM scripting
  • Source code for the image zooming application

  • 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

    Lose your application development headaches. Start developing and deploying applications with Advantage Database Server today. Download a 30-day trial for Free!

    Building Image Zooming Controls with the DOM for JavaScript
    (Page 1 of 4 )

    Welcome to the final part of the series entitled “Zooming images with JavaScript.” In four different tutorials, this series demonstrates how to use some of the most common methods provided by JavaScript to build a highly modular client-side application that allows for decent zooming effects on multiple images in a web document.

    If you're a web developer who's searching for an approachable guide on how to implement realistic zooming effects on several bitmapped images included in any web page, then look no further and start reading this article now!

    Now that I've introduced you to the main subject of this series, let me summarize the topics that were covered in detail during the preceding article. This way you can not only recall the concepts deployed in that specific tutorial, but know what to expect from this one.

    Having stressed that important point, I should assume that building an extensible image zooming application with JavaScript is, at this moment, a familiar thing to you, since this process was profusely discussed earlier. I walked you through the progressive development of the aforementioned JavaScript-based zooming application, which can be very useful when it comes to extending the functionality of a typical database-driven website.

    To be more specific, say that you have a website that pulls a certain number of products from one or more database tables, which are displayed in a fancy style. A web application like the one that I just described could be easily enhanced with a small bit of interactivity, if it's properly coupled with the zooming script that I'm currently developing in this series. Plus, you have the advantage of its remarkable simplicity along with its easy learning curve. What else can you ask for?

    And speaking of advantages, you'll certainly recall that in the previous article of the series I provided this image zooming application with the capability to implement this visual effect on multiple images included in a given web page. However, there was an important issue that needed to be addressed, since the respective zoom controls were built directly from inside the structural markup. This isn't the best approach to follow, simply because they should be created dynamically by using some DOM scripting.

    So assuming that this problem should be solved following a standard approach, in this last part of the series, I'll complete the development of this JavaScript-driven zooming application. This implies that each of the zoom controls will be appended on the fly via the DOM, after the pertinent web page has been loaded.

    So are you ready to tackle the last chapter of this educational journey? Let's get started now!

    More JavaScript Articles
    More By Alejandro Gervasio


       · This last part of the series completes the development of this JavaScript-driven...
     

    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 6 hosted by Hostway