Dynamic Images: Excluding your Link Images | WebReference

Dynamic Images: Excluding your Link Images

Logo

Zooming Images That Are Not Links
starting to do the advisable

The little red buttons are back doing their old job: helping you navigate through this e n d l e s s column. On this page we have captured click events on images that are not links. Check it out on our images. Two are links, one is not.

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

It's Easier with Netscape...

Because we don't have favourites in this column, we'll start with the Navigator code this time.

The Netscape event object has, as we saw in the popup, a .target property. This stores the value of the object/URL for which the event was intended. Images, as we have seen, respond to the mousedown event, which we covered extensively in our first column. Actually it is a lot more complex than this, but let's just go on the axiom that a mousedown will return an image object as a target and a click will not. If an image is a link, the intended target is the link URL. Therefore, a non-link image will return the image as the target property and a link image will return the href URL as the target.

Knowing this, all we have to do to determine if the image is not a link is to check if the target property returns an image.

    function findIt(e) { // include event object as argument if (zoomed) { zoomIn(); return false; } if (IE4) { isOK = (event.srcElement.tagName == "IMG") ? 1 : 0; if (isOK) { whichIm = event.srcElement; zoomOutInPage(); return false; } } else { if (e.target == "[object Image]") { // is it an image and not a link? whichIm = e.target; // assign image to our variable gotIt = true; // we got it! } if (gotIt) { zoomOutInEl(); return false; } } return true }

That's all. Just remember that the .target property is a string so the quotes are necessary in the equality test. We do not need our getImage function, and all the other functions remain the same.

...but more Logical with Explorer

All links are enclosed in the <A> and </A> tags. Explorer, as we saw, exposes the tag name of all objects. So our first step in determining if our image is a link is to deduce if it is enclosed in an anchor tag (<A>). We use another new property: parentElement.

The parent element of any object is the element/object that encloses it. In the case, of a linked image, it is the anchor. The parent element of our document is null because it is the top-most element.

To find if we pressed our mouse over an image:

    isImage = (event.srcElement.tagName == "IMG") ? 1 : 0;

And to determine if it is in an anchor:

    isAnchor = (event.srcElement.parentElement.tagName == "A") ? 1 : 0;

We must not forget that the anchor tag is not necessarily a link. It could have the NAME= attribute only. To be a link it must have an HREF= attribute. We check for the existence of an href property in our anchor:

    isLink = (isAnchor && event.srcElement.parentElement.href) ? 1 : 0;

Insert these lines and one more to define the isOK variable in findIt:

    function findIt(e) { // include event object as argument if (zoomed) { zoomIn(); return false; } if (IE4) { isImage = (event.srcElement.tagName == "IMG") ? 1 : 0; isAnchor = (event.srcElement.parentElement.tagName == "A") ? 1 : 0; isLink = (isAnchor && event.srcElement.parentElement.href) ? 1 : 0; isOK = (isImage && !isLink) ? 1 : 0; // is it an image and not a link? if (isOK) { whichIm = event.srcElement; zoomOutInPage(); return false; } } else { if (e.target == "[object Image]") { whichIm = e.target; gotIt = true; } if (gotIt) { zoomOutInEl(); return false; } } return true }

We can also modify our code so that particular types images are zoomed, whether they are links or not.


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