Home arrow JavaScript arrow Page 2 - Switching on Layers with Scripts

Switching on Layers with Scripts

This illustrates how to show visitors to a site which tab they are currently on. The article outlines how to create a script that manipulates the z-indices of graphical tabs to pull the one that is clicked to the top layer and show the content in that tab. There is a simple introduction to the div tag, the z-index property and DHTML scripting in general.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 11
June 08, 2004
  1. · Switching on Layers with Scripts
  2. · Starting with a Basic HTML Page
  3. · VBScript Subroutines
  4. · Using an Array
  5. · JavaScript Version

print this article

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:

<title>Using Layers</title>

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>
<div id=tab1 style="position:absolute;left:16;top:116;z-index:3">
<img src="tab1.gif">
<div id=tab2 style="position:absolute;left:95;top:115;z-index:2">
<img src="tab2.gif">
<div id=tab3 style="position:absolute;left:185;top:114;z-index:1">
<img src="tab3.gif">
<div id=tab4 style="position:absolute;left:276;top:116;z-index:0">
<img src="tab4.gif">
<div id=background style="position:absolute;top:150;z-index:-1">
<img src="background.gif">
<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 id=content1 style="position:absolute;top:200;left:50;z-index:4;">
Test content<br>test content
<div id=content2 style="position:absolute;top:200;left:50;z-index:4;">
Test content 2<br>test content 2
<div id=content3 style="position:absolute;top:200;left:50;z-index:4;">
Test content 3<br>test content 3
<div id=content4 style="position:absolute;top:200;left:50;z-index:4;">
Test content 4<br>test content 4

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.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials