Home arrow JavaScript arrow Page 3 - Switching on Layers with Scripts
JAVASCRIPT

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Switching on Layers with Scripts - VBScript Subroutines
(Page 3 of 5 )

VBScript is all about subroutines, small modules of script that execute independently; define the first subroutine, which is an onLoad event and sets how the page initially looks:

sub window_onLoad()
 content1.style.visibility="hidden"
 content2.style.visibility="hidden"
 content3.style.visibility="hidden"
 content4.style.visibility="hidden"
 startmessage.style.visibility="visible"
end sub

Next, add the subroutine to execute if and when tab1 is clicked:

sub tab1_onClick()
 tab1.style.zindex="3"
 tab2.style.zindex="2"
 tab3.style.zindex="1"
 tab4.style.zindex="0"
 content1.style.visibility="visible"
 content2.style.visibility="hidden"
 content3.style.visibility="hidden"
 content4.style.visibility="hidden"
 startmessage.style.visibility="hidden"
end sub

Repeat this subroutine another three times, one for each of the remaining tabs which the visitor/user can click:

sub tab2_onClick()
 tab2.style.zindex="3"
 tab1.style.zindex="2"
 tab3.style.zindex="1"
 tab4.style.zindex="0"
 content1.style.visibility="hidden"
 content2.style.visibility="visible"
 content3.style.visibility="hidden"
 content4.style.visibility="hidden"
 startmessage.style.visibility="hidden"
end sub
sub tab3_onClick()
 tab3.style.zindex="3"
 tab1.style.zindex="2"
 tab2.style.zindex="1"
 tab4.style.zindex="0"
 content1.style.visibility="hidden"
 content2.style.visibility="hidden"
 content3.style.visibility="visible"
 content4.style.visibility="hidden"
 startmessage.style.visibility="hidden"
end sub
sub tab4_onClick()
 tab4.style.zindex="3"
 tab1.style.zindex="2"
 tab2.style.zindex="1"
 tab3.style.zindex="0"
 content1.style.visibility="hidden"
 content2.style.visibility="hidden"
 content3.style.visibility="hidden"
 content4.style.visibility="visible"
 startmessage.style.visibility="hidden"
end sub

Now just add the end comment wrapper and close off the script:

-->
</script>


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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