Dynamic Images: Zooming ALL Images in Netscape

Zooming ALL Images in Navigator
doing the inadvisable for a Netscape Browser

Since we know that you enjoyed zooming the little red buttons on the previous page, we have captured all clicks on this page as well. You know the routine:

Stop this Nonsense!

Start It Again!

Netscape and click

You may have noticed that the one image that did not zoom in Navigator on the previous page was the one that was not a link. Although the documentation states that the click should be captured in the whole document, it seems to be captured only in links and margins. To avoid making things difficult, we can use the mousedown event.

if (NS4) {
    document.captureEvents(Event.MOUSEDOWN) 
    document.onmousedown = findIt;
}
else {document.onclick = findIt;}  // keep for Explorer 
Capturing the Mouse Position
In the Netscape scheme of things, all objects are not exposed to
script manipulation. Not yet, anyway. Nor does the event object identify
its source element. We therefore have to perform two workarounds:
Before we consider a way to expand the image's dimensions, we have to
identify an image as the recipient of a click event. We use the 
pageX
and 
pageY
 properties of the event object. (event.x
and event.y in IE)
Once we know where on the page the click occurred, we try to assign
these coordinates to an image by going through the document.images array
and checking against the position of each displayed image. It's a
roundabout, but it's the only way.
First, let's modify findIt to work with both browsers.
IMPORTANT: Although the event
object is passed to the findIt
 function, it must be included in the
function declaration as an argument. We will use the identifier e, as
Netscape does. Do not forget to include it.
function findIt(e) { // include event object as argument
    if (zoomed) {
        zoomIn(); 
        return false;
    }
    if (IE4) {                     // is it Explorer?
        isOK = (event.srcElement.tagName == "IMG") ? 1 : 0;
        if (isOK) {
            whichIm = event.srcElement;
            zoomOutInPage();
            return false;
        }
    }
    else {                         // or Netscape?
        l = e.pageX; t = e.pageY;  // get page coords of click
        gotIt = getImage(l,t);     // do they correspond to image?
        if (gotIt) {               // if yes...
            zoomOutInEl();         // zoom it and...
            return false;          // cancel default action
        }
    }
return true
}
Finding the image
All the work is done in the getImage function:
function getImage(l,t) {
    for (i=0; i<document.images.length; i++) {  // go through images one-by-one
        imX1 = document.images[i].x;            // get image's left coord
        imX2 = imX1 + document.images[i].width; // get image's right coord
        imY1 = document.images[i].y;            // get image's top coord
        imY2 = imY1 + document.images[i].height; // get image's bottom coord
        if ((l >= imX1 && l <= imX2) && (t >= imY1 && t<= imY2)) { // is the click in there?
            whichIm = document.images[i];        // if it is, this is our image
            gotit = true; break;                 // take the ball and run
        } 
    } 
return gotit     // did we find it or not?
}
Undocumented Image properties
In our for
 loop, we access four image properties to determine the
four page coordinates that define its rectangle: x, y, width, and height. We have not seen x or y
documented anywhere, but they exist as read-only properties.
By determining if the mouse click occurred within the boundaries of an
image, we are in a position to tell findIt how to proceed. Our return
value does that. If this value (gotIt) is true, findIt calls 
zoomOutInEl.
Overlaying a CSS positioned element
Declare the element
Since we cannot expand our image in-line with Netscape, we will do so
off-line. That is, in an absolutely positioned CSS element that will pop
up and contain the zoomed image.
 That means we have to backtrack for a minute to create our element,
which we will call, are you ready for this, elZoom.
<STYLE TYPE="text/css">
<!--
#elZoom {
    position: absolute;
    left: 0; top: 0;
    visibility: hidden;
}
-->
</STYLE>
No CSS element exists by its declaration alone. It must be also be
inserted into the HTML flow. Since our element, unlike those in our previous column, will not be immediately visible
and we don't even know where it will popup, we define it at the end of
our document. We will create it dynamically in a <SCRIPT> placed just before the </BODY> tag. This will also help our code to be
completely backward compatible and appendable.
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
    if (ver4) {
        if (NS4) { document.write("<DIV ID='elZoom'></DIV>") }
    }
//-->
</SCRIPT>
</BODY>
</HTML>
Notice, of course, that our element is completely empty. We will
write the HTML to it later. In our declaration, we positioned elZoom at
0,0 to avoid having it drawn at the end because, since it's invisible,
Netscape would render its height in blank space at the end of the page.
Write to the element
Function zoomOutInEl looks like this:
function zoomOutInEl(){
    newWidth  = whichIm.width * scale;
    newHeight = whichIm.height * scale;
     bigImStr = "<IMG NAME='imBig' SRC=\"" + whichIm.src + "\" WIDTH=" + newWidth + " HEIGHT=" + newHeight + " BORDER=0>";
    
    with (document.elZoom.document) {
        open();
        write(bigImStr);
        close();
    }
    document.elZoom.moveTo(whichIm.x,whichIm.y)
    document.elZoom.visibility = "visible";
    zoomed = true;
}
After getting our new width and height, we create a string of HTML
that we will write to the CSS element. The IMG tag contains many quotes
so be careful to escape the quotes belonging to the tag. Compare the
above scripted tag to the HTML tag (with fake values added):
<IMG NAME="imBig" SRC="ourImage.gif" WIDTH="250" HEIGHT="150" BORDER=0>
Since
every element has a document object, we use the document.write
method.
IMPORTANT: When writing to the
main document, or to a <LAYER> the open() method is assumed. When
writing to a CSS element the open() method is mandatory. Besides, it's
good style to use open() and close().
Using the new JavaScript 1.2 method moveTo, we position the element
over our image to be zoomed. All that is left is to make it visible and
set our zoomed variable.
Zooming in
Now, this is easier than Explorer. We simply make the CSS element
hidden, revealing the original image underneath it. Modify the zoomIn function:
function zoomIn() {
    if (IE4) {
        whichIm.width = whichIm.width / scale;
        whichIm.height = whichIm.height / scale;
    }
    else {
        document.elZoom.visibility = "hidden"
    }
    zoomed = false;
}
Now that we have covered the basics, let's modify our routine so we
can zoom only selected images.



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/allPicsNS.html