DHTML Lab - DHTML Diner - NS4: Loading New Page into Layer from Layer HREF (2) | WebReference

DHTML Lab - DHTML Diner - NS4: Loading New Page into Layer from Layer HREF (2)


DHTML Diner Logo

This is a Netscape Navigator 4 technique. The in-page examples will only work in Navigator 4, all platforms.

Loading New Page into Layer from Layer HREF (2)

The script is included at the end of our page. The script should take effect after we have defined the src for our element. The LAYER version defines it in-tag, while DIV/SPAN define it after page load. To be compatible with both options, our script functions are called after the page loads, using the onload handler. For our script to co-exist in cross-browser pages, we need to identify Navigator 4, using our usual browser variable.

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
NS4 = (document.layers);
if (NS4) {
    captEl = document.herman;
    window.onload = setUp;
    
    function setUp() {
        captEl.captureEvents(Event.CLICK)
        captEl.onclick = getSRC;
    }
    function getSRC(e){
        for (i=0; i<captEl.document.links.length; i++) {
            tempLink = captEl.document.links[i];
            if (tempLink == e.target) {
                captEl.src = e.target;
                setUp();
                return false
            }
        }
        return true;
    }
    
}
//-->
</SCRIPT>

Since our script is at the end of the page, the element has already been created. We must assign the identifier for the element to captEl. This is the only modification to the script you'll need to make. Next we, set the onload handler to call the setUp() function when the page has finished loading.

Capturing Element Clicks

The basis of our technique is the capture and identification of mouse clicks in the element. When setUp() is called, it first sets up our positioned element to capture all click events that occur within its boundaries, and directs these clicks to be handled by the getSRC() function:

    function setUp() {
        captEl.captureEvents(Event.CLICK)
        captEl.onclick = getSRC;
    }

Identifying Links

Several HTML elements can receive clicks in Navigator, including links, form buttons and the document itself. The target property of the implicit event object identifies the element or action that the click was meant for. In the case of a link, the target property stores the HREF of the link.

Since we are capturing all clicks, we must first determine if the the click was meant for a link contained in the element:

    function getSRC(e){
        for (i=0; i<captEl.document.links.length; i++) {
            tempLink = captEl.document.links[i];
            if (tempLink == e.target) {
                captEl.src = e.target;
                setUp();
                return false
            }
        }
        return true;
    }

The getSRC() function loops through all the link HREFs in the element. These are contained in the links array of the element's document. Each link HREF is assigned to the tempLink variable, which is then compared to the event's target property. If tempLink matches target, then we know that the user intended to link to a new page.

We then load this intended page into the element by updating the element's src property. The setUp() function is called again to set up capture for the clicks for the new page that is loaded.

Finally, we return false from the getSRC() function, cancelling the default action of the click, which was to load the page into the full window.

If we do not achieve a match between an element link HREF and the target, it means that the click was meant for an action other than a link, so setSRC() returns true.

Try it again:



Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 07, 1998
Revised: May 07, 1998

URL: http://www.webreference.com/dhtml/diner/layerlink/layerlink2.html