Improving an Image Zooming Application with JavaScript

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!