Switching on Layers with Scripts - Starting with a Basic HTML Page
(Page 2 of 5 )
The techniques described in this article really work best with graphical elements alongside the code. I won't be showing you how to create those as that's another article in itself; I'll just describe them as best as I can and assume that you have a similar set to work with. The underlying principles are the same, and the script will work just as well with pure text. Let's make a start on the coding.
Get yourself a basic HTML page set up with the usual tags:
<html>
<head>
<title>Using Layers</title>
</head>
<body>
</body>
</html>
Now define the basic page layout. We make extensive use of the <div> tag. The tag is extremely useful for grouping page elements into logical blocks, or divisions. Each of these divisions are named and can thus be manipulated with scripting. Make a note also of the z-index property of the <style> tag; this is how you define layers in web pages. The z-index gives your web pages a third dimension to work with. Any object, such as a picture or paragraph of text with a z-index of say 3 will appear above an object with a lower z-index, but below an object with a higher z-index.
As stated above, I'm assuming that you have some graphics to use for this task. I've used a collection of pictures to give the effect of a folder with tabs along the top. The main body of the folder is the background image, with the separate tabs along the top. Another point to note is the left and top positioning properties; using the exact pixel locations I have suggested below may result in the picture appearing differently if your screen resolution is set differently. This is obviously an issue that you will need to address when using the code online but is adequate for the purpose of this article.
Add the following code in between the <body> tags:
<h1>Understanding Layers</h1>
<hr>
<br><br>
<div id=tab1 style="position:absolute;left:16;top:116;z-index:3">
<img src="tab1.gif">
</div>
<div id=tab2 style="position:absolute;left:95;top:115;z-index:2">
<img src="tab2.gif">
</div>
<div id=tab3 style="position:absolute;left:185;top:114;z-index:1">
<img src="tab3.gif">
</div>
<div id=tab4 style="position:absolute;left:276;top:116;z-index:0">
<img src="tab4.gif">
</div>
<div id=background style="position:absolute;top:150;z-index:-1">
<img src="background.gif">
</div>
<div id=startmessage style="position:absolute;top:250;left:100;z-index:-1">
Welcome to the easy content manager. <br>Pick a tab to display information
</div>
<div id=content1 style="position:absolute;top:200;left:50;z-index:4;">
Test content<br>test content
</div>
<div id=content2 style="position:absolute;top:200;left:50;z-index:4;">
Test content 2<br>test content 2
</div>
<div id=content3 style="position:absolute;top:200;left:50;z-index:4;">
Test content 3<br>test content 3
</div>
<div id=content4 style="position:absolute;top:200;left:50;z-index:4;">
Test content 4<br>test content 4
</div>
This will form almost the entirety of your page, but it will change when you are using actual content instead of test content. The remainder of the code is placed within the <head> tag. First, define your scripting language. I'll show you the VBScript way, so add the following:
<script language="VBScript">
<!- - stealth mode on
The comment indicator is used to wrap up the script so that older browsers, which don't support scripting, simply ignore it. You don't have to add 'stealth mode on' after the comment wrapper, you could simply add 'cloaking', 'invisibility', or anything you want. It's a comment at the end of the day.
Next: VBScript Subroutines >>
More JavaScript Articles
More By Dan Wellman
