Dynamic Images: Excluding your Link Images

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.

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