Dynamic Images: Zooming Images by Type | WebReference

Dynamic Images: Zooming Images by Type

Logo

Zooming Images by Type
just the GIFs ma'am

There may be case where one would like to allow zooming only for JPG images, leaving the GIFs for links and navigation. On this page we will make small alterations to the code allowing you to toggle these options.

Since this page has two options, we declare two global variables at the beginning of our script:

    justGIFs = false; justJPGs = false;

Both GIFs and JPGs    Just GIFs    JustJPGs    Neither

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

Examine the src string

Every image object has a src property which reflects the HTML SRC= attribute. To identify a gif or jpg image, we simple have to search this property for a substring matching these file extensions. Note that jpg comes in two flavours: .jpg, the most popular, and .jpeg.

When we modify findIt to reflect these additions, we will make Netscape's image search a two tiered process. First it will check the .target property and then our old getImage function. Since our image may or may not be a link, it's best to do it this way instead of using just getImage, because if it is not a link, it can be identified immediately, without going through the document.images array.

    function findIt(e) { if (zoomed) { zoomIn(); return false; } if (IE4) { isImage = (event.srcElement.tagName == "IMG") ? 1 : 0; isGIF = (isImage && justGIFs && event.srcElement.src.indexOf(".gif") != -1) ? 1 : 0; isJPG = (isImage && justJPGs && (event.srcElement.src.indexOf(".jpg") !=-1 || event.srcElement.src.indexOf(".jpeg")!=-1) ) ? 1 : 0; isOK = (isGIF || isJPG) ? 1 : 0; /* isGIF and isJPG will only be true if the corresponding justGIFs and justJPGs variables are true */ if (isOK) { whichIm = event.srcElement; zoomOutInPage(); return false; } } else { if (e.target=="[object Image]") { whichIm = e.target; gotIt = true; } else { // bring back getImage l = e.pageX; t = e.pageY; gotIt = getImage(l,t); } if (gotit) { isGIF = (justGIFs && whichIm.src.indexOf(".gif") != -1) ? 1 : 0; isJPG = (justJPGs && (whichIm.src.indexOf(".jpg") !=-1 || whichIm.src.indexOf(".jpeg")!=-1) ) ? 1 : 0; gotIt = (isGIF || isJPG) ? 1 : 0; } if (gotIt) { zoomOutInEl(whichIm); return false } } return true }

We reinsert the getImage function and we're done. All our other functions stay the same.

Now we move on to the routine that will be used most often. Selecting images to zoom that may or may not be links, or GIFs or JPGs.


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