An Introduction to Microsoft Layers
You are here: irt.org | Articles | Dynamic HTML (DHTML) | An Introduction to Microsoft Layers
Published on: Saturday 16th May 1998 By: Paul Rundle
Introduction
In this article we introduce you to layers compatible with both NN4 and MSIE4. You will learn how to
show images and text using layers. Layers enable you to position text or pictures anywhere on the page.
The layers shown in this example are compatible with both NN4 and MSIE4, however the section on altering
the contents of layers is only suitable for MSIE4, as NN4 does not provide support for innerText,
outerText, innerHTML and outerHTML layer properties.
Creating a layer
We will start off by taking a normal webpage and giving it layers. This page has two bits of text and a
picture. To give a normal webpage layers you put the content you want in one of the layers inside DIV tags.
It is a good idea to indent everything inside a layer with a tab so that you can quickly tell where the
layers start and end.
<HTML><HEAD><TITLE>Normal Webpage</TITLE></HEAD>
<BODY>
<P>This is a normal webpage
<P>We are going to give it layers
<P>
<IMG SRC="dhtml.gif">
</BODY></HTML>
|
Now add the DIV tags and indent everything inside them:
<HTML><HEAD><TITLE>Webpage With Layers</TITLE></HEAD>
<BODY>
<DIV ID="layer1">
<P>This is a normal webpage
</DIV>
<DIV ID="layer2">
<P>We are going to give it layers
</DIV>
<DIV ID="layer3">
<P><IMG SRC="dhtml.gif">
</DIV>
</BODY></HTML>
|
Working Example
As you can see, the page now has 3 layers; layer1, layer2 and layer3. It is best to remove <P>
tags from the start of a layer, they just get in the way and screw up the layer positioning. Before we can
use the layers we must position them. To do this we must add a <STYLE> tag to the <HEAD> and
define the layer.
<HTML>
<HEAD>
<TITLE>Webpage With Layers</TITLE>
<STYLE>
#layer1 {POSITION:absolute; VISIBILITY:visible; TOP:10px; LEFT:100px; Z-INDEX:1}
#layer2 {POSITION:absolute; VISIBILITY:visible; TOP:50px; LEFT:225px; Z-INDEX:2}
#layer3 {POSITION:absolute; VISIBILITY:visible; TOP:80px; LEFT:10px; Z-INDEX:3}
</STYLE>
</HEAD>
<BODY>
<DIV ID="layer1">This is a normal webpage</DIV>
<DIV ID="layer2">We are going to give it layers</DIV>
<DIV ID="layer3">IMG SRC="dhtml.gif"></DIV>
</BODY>
</HTML>
|
Take a look at the example for yourself.
Layer Properties
The properties (inside curly brackets) are preceded by the name of the layer, layers can be called
anything but you must us the correct name when defining them. The layer name is preceded by a #. We will
now go over what these properties mean:
- POSITION - Either absolute or relative. Absolute positions the
layer at the exact position defined by TOP and LEFT. Relative positions the
layer after whatever came before it, like an inline image.
- VISIBILITY - Visible or hidden. This only applys when the page is first
loaded, one of the main advantages of DHTML is that you can show or hide layers once the page has loaded.
- TOP - A value (usually in pixels) that defines where the layer is positioned on the Y
(vertical) axis, with 0 being the top of the page. Negative numbers can be used but it is a bit tricky.
- LEFT - A value (also in pixels) that defines where the layer is positioned on the X
(horizontal) axis, with 0 being the left of the page.
- Z-INDEX - A number that defines what order the layers are placed. The smallest number will
position that layer at the bottom of the page, the highest number will position the layer at the top of the
page. This means that when you position layers on top of each other the layer with the highest Z-INDEX will
be on top and the lowest Z-INDEX will be on the bottom of the pile.
We can also use 3 more properties, though these are only useful with text:
- WIDTH - The width of the layer (pixels). Expressed as WIDTH:10px.
- HEIGHT - The height of the layer (pixels). Expressed as HEIGHT:100px.
- All CSS Font Properties - All the font properties used in CSS can be put between the curly
brackets. These properties will define the default font for the text within that layer. You can also use
background-color: 000000 with WIDTH and HEIGHT to create a square box with
whatever colour you want.
The best way to learn these properties and what they can do is by messing around with them. You will
need to know how to position layers before continuing, nearly everything in DHTML will use them.
Altering Layer Content
Just to repeat: The following will only work in Microsoft Internet Explorer 4:
This section will cover innerText and some of the more simple changes that can be made to layers once the page has loaded.
innerText is a simple way of changing text on a page when something happens,
whether the event is onMouseOver, onDblClick or onClick. The list of links below
are a good example of what innerText can be used for (don't click the links,
they don't lead anywhere):
As you can see, when you move the mouse over a link two things happen: the link changes size and the
comment on the right changes to give you a description. First we will deal with changing text:
Start by putting this between the <STYLE> tags (or in your stylesheet):
<STYLE>
.over {font-family:Arial;color:red;text-decoration:none;font-weight:bold;font-size:12pt}
.out {color:red;font-family:Arial;font-size:10pt;text-decoration:none}
</STYLE>
|
If you have learnt CSS properly you will know what the above script will do. It makes two classes, one
called over and one called out. These classes can be called up onMouseOver to change the
text. The script below shows how to change a link using these classes:
<A HREF="whatever.htm" onMouseOver="this.className='over';"
onMouseOut="this.className='out';">Link</A>
|
Now to create the innerText layer.
<div id='info'>Move your mouse over one of the links</div>
|
And now to use innerText and the over and out classes in a link:
<a href="" onMouseOver="this.className='over'; info.innerText='<B>My homepage</B>. Contains some useful and some useless stuff.';" onMouseOut="this.className='out'; info.innerText='';">My page</a><BR>
<a href="" onMouseOver="this.className='over'; info.innerText='<B>JavaScript</B> and nothing else.';" onMouseOut="this.className='out'; info.innerText='';">Martin Webbs page</a><BR>
<a href="" onMouseOver="this.className='over'; info.innerText='<B>Star Trek</B> and other totally crap stuff.';" onMouseOut="this.className='out'; info.innerText='';">Tullyphinlamps page</a> |
And finally position the layers inside a table big enough to hold the largest portion of text without
the page needing to jump about to fit it in:
<STYLE>
.over {font-family:Arial;color:red;text-decoration:none;font-weight:bold;font-size:12pt}
.out {color:red;font-family:Arial;font-size:10pt;text-decoration:none}
</STYLE>
<P><TABLE><TR><TD WIDTH="200" HEIGHT="100">
<a href="" onMouseOver="this.className='over'; info.innerText='<B>My homepage</B>. Contains some useful and some useless stuff.';" onMouseOut="this.className='out'; info.innerText='';">My page</a><BR>
<a href="" onMouseOver="this.className='over'; info.innerText='<B>JavaScript</B> and nothing else.';" onMouseOut="this.className='out'; info.innerText='';">Martin Webbs page</a><BR>
<a href="" onMouseOver="this.className='over'; info.innerText='<B>Star Trek</B> and other totally crap stuff.';" onMouseOut="this.className='out'; info.innerText='';">Tullyphinlamps page</a><BR>
</TD><TD WIDTH="400" HEIGHT="100">
<div id='info'>Move your mouse over one of the links</div>
</TD></TR></TABLE>
|
You'll soon notice that the replacement of text, is simply that: text. The bold rendering does not
occur. To actually change HTML within a layer we need to use a different layer property, namely innerHTML:
<STYLE>
.over {font-family:Arial;color:red;text-decoration:none;font-weight:bold;font-size:12pt}
.out {color:red;font-family:Arial;font-size:10pt;text-decoration:none}
</STYLE>
<P><TABLE><TR><TD WIDTH="200" HEIGHT="100">
<a href="" onMouseOver="this.className='over'; info2.innerHTML='<B>My homepage</B>. Contains some useful and some useless stuff.';" onMouseOut="this.className='out'; info2.innerHTML='';">My page</a><BR>
<a href="" onMouseOver="this.className='over'; info2.innerHTML='<B>JavaScript</B> and nothing else.';" onMouseOut="this.className='out'; info2.innerHTML='';">Martin Webbs page</a><BR>
<a href="" onMouseOver="this.className='over'; info2.innerHTML='<B>Star Trek</B> and other totally crap stuff.';" onMouseOut="this.className='out'; info2.innerHTML='';">Tullyphinlamps page</a><BR>
</TD><TD WIDTH="400" HEIGHT="100">
<div id='info2'>Move your mouse over one of the links</div>
</TD></TR></TABLE>
|
Try it out for yourself:
Feedback on 'An Introduction to Microsoft Layers'
View the profile on Paul Rundle and the list of other Articles by Paul Rundle.
| 