Switching on Layers with Scripts
(Page 1 of 5 )
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.
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.
Next: Starting with a Basic HTML Page >>
More JavaScript Articles
More By Dan Wellman
