Dynamic Images: Zooming ALL Images in Explorer | WebReference

Dynamic Images: Zooming ALL Images in Explorer

Logo

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/">
<IMG NAME="imZFruit" SRC="3d.jpg" WIDTH=80 HEIGHT=60 HSPACE=20 ALIGN=LEFT BORDER=0></A>

<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: https://www.webreference.com/dhtml/column3/allPicsIE.html