Working with Multiple Graphics for a Zoom Application in JavaScript
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.
Working with Multiple Graphics for a Zoom Application in JavaScript - Listing the source code of the previous zooming application (Page 2 of 4 )
A good way to demonstrate how the initial zooming application can be considerably improved to provide it with the capacity to work with more than one bit-mapped image involves listing its complete source code as it was developed in the preceding article of the series. In doing so, you'll be able to compare this version of the application with the one that I plan to build later on. Sounds pretty logical, right?
Having said that, have a look at the signature of the following (X)HTML file, which implements a fully-functional zooming effect on a predefined image:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As shown earlier, the above code sample implements an extensible JavaScript application that performs a zooming in/out effect on a selected image. Of course, this task is carried out by the respective "ZoomImage()" function, which was actually discussed in detail in the previous tutorial, so I won't bore you with explaining how it works again.
So far, so good. At this stage you hopefully recall how the prior zooming application does its thing, even when it lacks the capacity to work with multiple images. Therefore, I think that it's time to introduce some crucial modifications to the pertinent JavaScript code to make it zoom in/out more than one graphic.
To see how this will be achieved, please click on the link below and keep reading.