Articles | Introduction to
Microsoft Layers | back
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 web page and
giving it layers. This page has two bits of text and a picture. To give a normal
web page 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="images/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="images/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>Cybercoded.com</B>. Contains some useful and some useless stuff.';"
onMouseOut="this.className='out'; info.innerText='';">Cybercoded</a><BR>
<a href="" onMouseOver="this.className='over'; info.innerText='<B>
JavaScript</B> and nothing else.';" onMouseOut="this.className='out';
info.innerText='';">GlobalNetworking.net</a><BR>
<a href="" onMouseOver="this.className='over'; info.innerText='<B>
GN-Direct.com
</B> some more cool stuff.';" onMouseOut="this.className='out';
info.innerText='';">GN-Direct</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>CyberCoded
</B>. Contains some useful and some useless stuff.';" onMouseOut="this.className=
'out'; info.innerText='';">CyberCoded.com</a><BR>
<a href="" onMouseOver="this.className='over'; info.innerText='<B>GlobalNetworking
</B> and nothing else.';" onMouseOut="this.className='out'; info.innerText='';">
GlobalNetworking.net</a><BR>
<a href="" onMouseOver="this.className='over'; info.innerText='<B>GN-Direct</B>
some more cool stuff.';" onMouseOut="this.className='out'; info.innerText='';">
GN-Direct.com</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>CyberCoded</B>.
Contains some useful and some useless stuff.';" onMouseOut="this.className='out';
info2.innerHTML='';">CyberCoded.com</a><BR>
<a href="" onMouseOver="this.className='over'; info2.innerHTML='<B>GlobalNetworking</B>
and nothing else.';" onMouseOut="this.className='out'; info2.innerHTML='';">
GlobalNetworking.net</a><BR>
<a href="" onMouseOver="this.className='over'; info2.innerHTML='<B>GN-Direct</B>
some more cool stuff.';" onMouseOut="this.className='out'; info2.innerHTML='';">
GN-Direct.com</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:
Articles | Introduction to
Microsoft Layers |
back
|
