Dynamic Images: Excluding your Link Images

Zooming Images That Are Not Linksstarting 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.

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.

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: