A Gift of "Life" : The Document Object Model
Multimedia in Microsoft Internet Explorer
What is So Dynamic About Dynamic HTML?
You are here: irt.org | Articles | Dynamic HTML (DHTML) | An Introduction to Microsoft Layers [ previous next ]
Published on: Saturday 16th May 1998 By: Paul Rundle
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.
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>
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.
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:
We can also use 3 more properties, though these are only useful with text:
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.
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):
|
My page Martin Webbs page Tullyphinlamps page |
Move your mouse over one of the links
|
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:
|
My page Martin Webbs page Tullyphinlamps page |
Move your mouse over one of the links
|
A Gift of "Life" : The Document Object Model
Multimedia in Microsoft Internet Explorer
What is So Dynamic About Dynamic HTML?
Building a Dynamic Thank You Page
An Introduction to Netscape Layers