Dynamic Images: Zooming In-Page

Dynamic Images:
zooming images in-page

In our columns so far, we have concentrated on new scripting properties or events and created applications for them. Now we will take a different approach:

We will take an application idea and go through the diverse HTML and scripting required to actualize it. Our sample application will be: expanding thumbnail images without leaving the web page presently loaded. The code we will create can be appended to existing documents making them dynamic with complete cross-browser and backward compatibility. Along the way, we will learn, among other things, how to:

• capture events
• dynamically update HTML content in elements
• reposition elements according to browser window-size
• make Communicator and Explorer differences compatible

If you are using a non-dynamic browser all the images and links in this column will act normally. You will not be able to experience Dynamic Images but you may follow the tutorial.		Column Map: The Event Object - The Event object is the key to backward compatibility. A quick overview with a popup utility to help you understand event properties. Zooming Images in Explorer Zooming Images in Navigator O P T I O N S Excluding Images that are Links Zooming Images by Type Zooming Images by Name Keeping the Zoom Within the Display Complete Code - All the options discussed combined into code to be appended to already existing pages.

The Problem:

The click-to-see-a-bigger-version image must be on hundreds of thousands web pages whether they are parts of e-commerce catalogs or personal home pages.

How many times have you seen this:

Click on the image to the left for a larger version.
Don't forget to press the back button on your browser to return here.

Or this:

Click on the image to the left or here to see more of me and my computer.

In the first case, the link was to the image itself and we loaded the full image into our browser, without any accompanying text or navigation aids. If this was a catalog, the description would have been left behind, and we may have to go back and forth a couple of times to see if the description matched the blow-up. And using the back-button is annoying when one is on the same site.

The second example loaded a new page with HTML content and it could have the product description. Nevertheless, it is a new page, requiring another trip to the server plus the headache of writing a page for every image.

With Dynamic HTML, however, we can do the following:

Click on the image to zoom out.

Over the next pages we will go into the construction of this ostensibly simple application step-by-step. We will approach it the way an author attempting to write cross-browser and backward compatibility would. We will add features, create routines as necessary, remove from them and add to them again.

In the end we will have a fully appendable cross-browser backward-compatible routine that can be used with already existing catalogs. The link HTML will remain as is, available to every browser, not just the big two.

Get the Coke and chips and let's start.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 08/27/97
Revised: 09/28/97

URL: https://www.webreference.com/dhtml/column3/