LIS 523/5 - Layers

Layers in HTML allow for control over position and visibility of selected content in a Web page. Recent browsers generally recognize layers defined by means of styles. Styles are usually applied with the div or span tag. An example is,
<div id=layer1 style="position:absolute; left: 50;top: 50; visibility: hidden;z-index:5; background-color:blue">
<H1>Layer 1 </H1>
<P>This layer has a blue background for text.
Although a style for a div or span may omit position, this means that the div or span element is not recognized as a layer.

U n f o r t u n a t e l y, different browsers display layers slightly differently, and layers may not display correctly in smaller windows.

Scripting with Layers

You can change layer characteristics dynamically using client-side scripting. Again, there is some variation among browsers. Earlier versions of Netscape had one method which was incompatible with other browsers; later versions (along with other Gecko based browsers like Mozilla) scrapped this more or less completely and went for something based more (but not entirely) on the DOM, or Document Object Model, thus breaking older Web pages; but there are still a number of problems.

You may need to detect the browser in order to take some special action to accommodate its quirks. For example, the following code changes the mouse move event handler for a layer to a different function for Gecko browsers; (it also has the hidden side effect of causing the event handler to be passed an object in lieu of the DOM event object, which Netscape refuses to recognize):

if (navigator.appName == 'Netscape') { document.getElementById('layer1').onmousemove=mouseMoveHandler }

You may find the JavaScript eval() method useful here: it allows you to construct script expressions and statements dynamically within a script and then evaluate or execute them. The browser type can be detected just once (in the onLoad event handler for the page) and variables can be set to appropriate values for later use as part of eval() arguments.

The examples in 52_layde.htm (in the frame on the right if you are viewing 52_layfs.htm) all work in Internet Explorer and Opera (normal size display). Most also work in recent versions of Netscape and Mozilla; the exceptions are the letter buttons, and the buttons for the cyan background and red foreground, where these browsers report that the document of the layer has no properties. In Opera's small screen display, only the mouse tracking works. Nothing works in MSN TV Viewer.

A layer can be identified in a script in Internet Explorer and Opera by This is not supported by Gecko browsers, however. For better browser support, you need to use the clumsier form document.getElementById('layername').style. You can then refer to the individual style properties of the layer by appending their names with a dot; for example, document.getElementById('layer1')

Changing a Layer's Stack Position

You can control which of two or more layers appears in front and which appears in back by changing their zIndex. For example, the "Back" and "Front" buttons in the demonstration page change the relative stacking position of the two layers.

Moving a Layer

A layer can be moved by changing its left and top values. A simple number can always be used to set the values. Getting the existing values is slightly more complicated, since they are returned with "px" on the end, instead of as simple integers; the parseInt function can be used to extract the number from this form. Try moving the first layer in the demonstration page by clicking on the "Down" or "Up" button.

Setting Layer Visibility

You can hide and reveal a layer by setting its visibility property to "hidden" or "visible". Try it with the "Hide" and "Show" buttons in the demonstration page.

Changing Contents of Layers

To refer to an image in a layer in Internet Explorer or Opera, use document.getElementById('layer1').document.imageid. For example, click on one of the letter buttons to change the image that appears in the layer.

Trying to change other properties of the document property of a layer has peculiar results. Generally, it is the corresponding property of the parent document that is affected instead. For example, clicking on the "Cyan bg" button should change the background color of the layer, but in fact changes the background color of the whole document instead. Similarly, the "Red fg" button should set only the layer's foreground color, but in fact also sets the color of text that is not in the layer. To change the foreground color of just the layer, you need to use document.getElementById('layerid').style.color; try clicking the "Yellow fg" button as an example.

Event Handlers for Layers

Recent browsers recognize event handlers associated with a layer, such as onClick or onMouseMove. For example, note what happens to the contents of the text box if you move the mouse cursor over the first layer.

Tracking the Mouse Position

In the DOM, there is an object class Event whose clientX and clientY properties store the mouse cursor position; both these values are relative to the window, however, not to the layer or even to the document. In Internet Explorer and Opera, there is a global Event object event for the latest mouse event; Gecko browsers fail to recognize event and the event handler must instead be passed an object specific to the particular event.

By writing appropriate code to handle the mousedown and mouseup events, you can allow the viewer to drag a layer from one place to another.

Clipping a Layer

A layer's clip property can be manipulated to show only parts of the the layer's content. You set the clipping region by assigning clip a string value of the form "rect(top right bottom left)". Click on the "Clip" and "Unclip" buttons in the demonstration frame to see effects of clipping. In versions of Opera before version 8, clipping affected only the foreground of the layer, not its background.

For More Information


Last updated June 14, 2006.
This page maintained by Prof. Tim Craven
E-mail (text/plain only):
Faculty of Information and Media Studies
University of Western Ontario,
London, Ontario
Canada, N6A 5B7