Working with Multiple Graphics for a Zoom Application in JavaScript (Page 1 of 4 )
Welcome to the third installment of the series "Zooming out images with JavaScript." This set of educational tutorials guide you through the process of developing a highly modular JavaScript application that has the capacity to perform basic zoom in/out effects on a certain number of bit-mapped images previously included in a web document.
JavaScript is widely used by both novice and experienced web developers to extend the behavior of several web applications that were built originally by way of a server-side programming language. In terms of expanding the functionality of a given web application, zooming into and out of bit-mapped images is one of the easiest to learn and code among the numerous visual effects that are usually implemented via client-side scripting.
If you already went through the preceding article of this series, then it's quite probable that zooming into and out of bit-mapped images using JavaScript is now a familiar process for you. The procedure requires only a minimal background in the most common methods provided by the DOM (short for Document Object Model) and an intermediate level of knowledge about (X)HTML and CSS styles.
Basically, the approach that I followed in the previous tutorial to achieve realistic zoom in/out effects on a given image, was based on enlarging (or reducing, when applicable) the respective "width" and "height" attributes of the targeted image via some simple client-side scripting, in this way achieving the zooming effect.
As you may notice, this technique is rather simple, but the ease by which it's implemented in any web site along with its more than acceptable results makes it ideal for building a "quick and dirty" zooming application.
Besides, during the previous tutorial I developed a basic script that was capable of zooming into and out of a selected image by utilizing a pair of common web form buttons. However, regardless of the fact that this zooming script was quite useful for applying this visual effect to any bit-mapped graphic, the truth is that it lacked some important features, like the capacity to work with multiple images. Not too good, is it?
So, bearing in mind that any decent zooming application should be capable of targeting several images in a given web page, over the course of this third article of the series I'm going to introduce some important modifications to the script that you learned previously. This way it can zoom into and out of multiple graphics at the same time.
All right, now that you know the subject that will be covered in this tutorial, it's time to learn how to modify the original JavaScript zooming application to provide it with the ability to work with several images in a web page. Let's get going!
Next: Listing the source code of the previous zooming application >>
More JavaScript Articles
More By Alejandro Gervasio
