Dynamic Images: Zooming ALL Images in Netscape | WebReference

Dynamic Images: Zooming ALL Images in Netscape

Logo

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!

<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>

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