Home arrow JavaScript arrow 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
(Page 1 of 5 )

Switching on Layers with Scripts and the <div> Tag

Using web pages to display information is very easy; after all, that's exactly what HTML was invented to do. Another key feature of the language is using hyperlinks to jump from page to page. Pretty basic stuff. But what if you want four or five pages of information condensed onto one web page? You could just have one extremely long page, which visitors would keep having to scroll down through, but how many people do you think will read past the first paragraph? Or the first sentence even?  Not many. 

A point that I have made before, and will undoubtedly keep making, is that people just don't like being confronted by huge blocks of static text. It's a fact. People want color, interaction, and fun. Which website would get more visitors? A simple Flash game where you hit penguins across the tundra and compete for high scores, or a page detailing the precise meaning of life in only five hundred paragraphs? I know which one I'd put my money on.

Those of you who are familiar with art packages such as Photoshop will already be aware of the concept of using layers. They give your work depth, and let you organize content so that related items appear on the same level and things in the foreground appear in front of things in the background. They also increase productivity by letting you hide layers that you are not working on, or show all layers containing a particular theme. This is all very well and good, but what has it got to do with web pages? What if you could import the functionality of layers into your web pages and let your visitors decide what information is shown on screen at any one time? You'll be pleased to hear that you can, and you can do it using just DHTML, or HTML combined with inline CSS and a scripting language of your choice.

The benefits of this are enormous; you can keep several pages of structured information on just one web page which visitors don't have to scroll down through to find what they're looking for, and you can organize related content into layers that people show or hide based on their selections. You create an interaction between the user and your site. It doesn't have to be confined to the Internet either; you can create archives of data that you keep on your desktop, or on your company's network, and it's all contained within one file. Small, portable, attractive, and in a format that anyone will be able to use since not everyone has Word, but everyone has a browser of some description.

This leads me nicely to the subject of which scripting language to use; the obvious choices are JavaScript or VBScript, both powerful, both with strengths and weaknesses. JavaScript is more widely supported, being compatible with the two most popular browsers, Microsoft's Internet Explorer and Netscape Communicator. VBScript however seems more structured and in many cases is easier to learn and work with, but is currently compatible only with IE. The choice is yours, and in the interests of education, I'll be showing you how to do it in both languages. 

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