WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column3

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

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks

Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape? Microsoft Article: BitLocker Encryption on Windows Server 2008 Go Parallel Article: Intel Thread Checker, Meet 20 Million LOC IBM Whitepaper: Innovative Collaboration to Advance Your Business Internet.com eBook: Real Life Rails Avaya Article: Call Control XML - Powerful, Standards-Based Call Control Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks Internet.com eBook: The Pros and Cons of Outsourcing Internet.com eBook: Best Practices for Developing a Web Site

IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future" Avaya Article: Call Control XML in Action - A CCXML Auto Attendant Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008 Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++ HP Video: Is Your Data Center Ready for a Real World Disaster? Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices HP On Demand Webcast: Virtualization in Action Go Parallel Video: Performance and Threading Tools for Game Developers

Rackspace Hosting Center: Customer Videos Intel vPro Developer Virtual Bootcamp HP Disaster-Proof Solutions eSeminar HP On Demand Webcast: Discover the Benefits of Virtualization MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications Microsoft Download: Silverlight 2 Software Development Kit Beta 2 30-Day Trial: SPAMfighter Exchange Module Red Gate Download: SQL Toolbelt

Iron Speed Designer Application Generator Microsoft Download: Silverlight 2 Beta 2 Runtime MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

IBM IT Innovation Article: Green Servers Provide a Competitive Advantage Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

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

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