Switching on Layers with Scripts - JavaScript Version
(Page 5 of 5 )
As promised, here is the JavaScript version of the code for those of you that want maximum compatibility. Again, first define the scripting language and add the wrapper:
<script language="Javascript>
<!- - stealth mode on
This time, you don't need to worry about subroutines, but you will need to create four functions to call when the various tabs are clicked. The first function can be defined using the following code:
function taboneontop() {
tab1.style.zIndex="3";
content1.style.visibility="visible";
tab2.style.zIndex="2";
content2.style.visibility="hidden";
tab3.style.zIndex="1";
content3.style.visibility="hidden";
tab4.style.zIndex="0";
content4.style.visibility="hidden";
startmessage.style.visibility="hidden";
}
It's fairly simple and should be easy to follow; it simply changes the current z-indices of the tabs and un-hides the relevant content div. Create another three functions, one for each tab that can be clicked:
function tabtwoontop() {
tab1.style.zIndex="2";
content1.style.visibility="hidden";
tab2.style.zIndex="3";
content2.style.visibility="visible";
tab3.style.zIndex="1";
content3.style.visibility="hidden";
tab4.style.zIndex="0";
content4.style.visibility="hidden";
startmessage.style.visibility="hidden";
}
function tabthreeontop() {
tab1.style.zIndex="2";
content1.style.visibility="hidden";
tab2.style.zIndex="1";
content2.style.visibility="hidden";
tab3.style.zIndex="3";
content3.style.visibility="visible";
tab4.style.zIndex="0";
content4.style.visibility="hidden";
startmessage.style.visibility="hidden";
}
function tabfourontop() {
tab1.style.zIndex="2";
content1.style.visibility="hidden";
tab2.style.zIndex="1";
content2.style.visibility="hidden";
tab3.style.zIndex="0";
content3.style.visibility="hidden";
tab4.style.zIndex="3";
content4.style.visibility="visible";
startmessage.style.visibility="hidden";
}
Now just add the closing comment wrapper and end the script in the normal way:
-->
</script>
All you need to do now is add an onClick event to each of your tab div's to call the function when the object is clicked:
<div id=tab1 onClick="taboneontop()" style="position:absolute;left:16;top:116;z-index:3">
Add a similar handler to each of the other tab div's, but remember to change the function call, i.e. for the tab2 div, add onClick="tabtwoontop()", etc.
Conclusion
The goal of this article was to create a script that manipulated first the z-indices of the graphical tabs in order to pull the one that is clicked to the top layer. This is an excellent way of showing the visitor/user which tab they are currently on. The script secondly displays content relating to the tab number in the main body of the graphic. Using these scripts can add a quality of depth to your work that is impossible using pure HTML. Feel free to use these scripts in any way you see fit and to modify them in your own way. There are probably numerous ways in which they can be improved, certainly in the case of the JavaScript file, but I hope it has been a simple introduction to the div tag, the z-index property and DHTML scripting in general.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
