Dynamic Images: Zooming ALL Images in Explorer | WebReference

Dynamic Images: Zooming ALL Images in Explorer


Zooming ALL Images
doing the inadvisable

This page has captured all mouse click events. Whenever a click occurs on an image, that image is expanded 2.5 times. Clicking anywhere restores the image to its original size. All images are included, including our navigation link buttons and the ad banner. There is one image on this page that won't zoom if you are using Navigator. If you are using Explorer you may notice a beta bug when the image is zoomed back in and the page restored. We'll find out why later. If you want to toggle the effect, use these text links:

Stop this Nonsense!

Start It Again!

<A NAME="imBigGuy">
<IMG NAME="imZJup" SRC="jupiter.jpeg" WIDTH=80 HEIGHT=60 HSPACE=20 ALIGN=LEFT></A>

<A HREF="/3d/lesson17/">

<A HREF="/outlook/column5/">
<IMG NAME="imRich" SRC="richWig.gif" WIDTH=80 HEIGHT=60 HSPACE=20 BORDER=0></A>

How It's Done

As discussed in the previous page, we have to first of all set up our document so that it captures all clicks in the page.

We start our JavaScript in our <HEAD>, and set up our browser identification variables:

    <SCRIPT LANGUAGE="JavaScript1.1"> <!-- NS4 = (document.layers) ? 1 : 0; // is it Netscape 4+ IE4 = (document.all) ? 1 : 0; // is it Explorer 4+ ver4 = (IE4 || NS4) ? 1 : 0; // if it's either it's version 4

We set up several variables that will be used by more than one function later:

    if (ver4) { var whichIm = null; // presently clicked or zoomed image var zoomed = false; // is any image presently zoomed? var gotIt = false; // have we found an image? (used by NS only) var scale = 2.5; // factor to zoom by if (NS4) { document.captureEvents(Event.CLICK); } // define NS click capture document.onclick = findIt // set up NS/IE click capture }

Notice that all clicks are redirected to a function called findIt. This is the primary function that processes the click, checks to see if we clicked on an image and calls other functions that will zoom our image out or in accordingly. findIt will do the above for both Explorer and Netscape. Since the routines are different, we'll discuss them separately then put them together.

Zooming with Internet Explorer 4

The Explorer 4 document object model exposes every HTML element in a web page to dynamic manipulation through scripting. That means that not only can we read information about objects in our page, we can write new values for any object's properties and have the page rearrange itself to accomodate the changes. Scaling an image, then, involves only reading the present width/height values and writing the scaled width/height values back. First, let's set up findIt.

    function findIt() { if (zoomed) { zoomIn(); return false; } isOK = (event.srcElement.tagName == "IMG") ? 1 : 0; if (isOK) { whichIm = event.srcElement; zoomOutInPage(); return false; } return true }

When we click, findIt receives the event along with all the event properties as shown in our previous page. But first it checks to see if there is an image already zoomed. If there is, it calls zoomIn. Any click on the page, when an image is zoomed, will close that image. The event property we are concerned with is srcElement. event.srcElement is the event's source HTML element. We need to know if this element is an image. Every object that is an HTML element has a property called tagName, which is the HTML tag surrounding the element. In an image, of course, it is the IMG tag. So to identify if the element clicked on is an image and assign a value to a boolean, we need only one line:

    isOK = (event.srcElement.tagName == "IMG") ? 1 : 0;

If we identify it as an image, we assign its value to whichIm to identify it in general and as the presently zoomed image. Once this is done, we call function zoomOutInPage. We then return from findIt with false as the return value. Remember, our event handler (findIt) returns false if we don't want the default action of the click (like processing a link) to occur. If we do want the default action to go ahead (if we did not identify an image, for example), we return true.

The functions for zooming out and in are straightforward. In the former, we multiply the present width/height of the image by the scale variable and set zoomed to true. To zoom in, we divide the width/height of the image by the scale variable and set zoomed to false.

    function zoomOutInPage() { whichIm.width = whichIm.width * scale; whichIm.height = whichIm.height * scale; zoomed = true; } function zoomIn() { whichIm.width = whichIm.width / scale; whichIm.height = whichIm.height / scale; zoomed = false; }

That was easy. We must duplicate this routine for Netscape Navigator 4, however, which accomplishes the same effect somewhat differently.

Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/column3/allPicsIE.html