Dynamic Images: Zooming Images by Type

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