Using javascript to change CSS z-index

...the navigation tabs look like notebook tabs

[Storyman]

The page is CSS. On the left of the page is a left panel (say 150px wide). Running vertically down the right edge of the left panel are a series of tabs that look like the tabs in a three ring binder.

Each of the tabs has its own CSS ID (#tab1, #tab2, #tab3).

The effect is when any of the tabs are clicked the content and background in the panel change.

It isn't a difficult effect to do, but not knowing javascript I'm wondering where to start with changing the visibility or z-index for each layer.

This is something that will be used exclusively in IE browsers--if that makes any difference.

Can someone point me to a good tutorial that covers this task? Or at least give me a clue where to begin.

[broniusm]

Storyman-
In IE, I like giving my tab-like components a single ID and looping thru them as an array, setting all invis, setting one visible.
Visibility in IE is easily done with
obj.style.display='block' to show it and
obj.style.display='none' to hide it.

These could possibly be layered on top of "always on-always background" tabs.

Hope this helps you get started..

[Rambo Tribble]

It should be noted that ID's should never be shared by more than one element. Names can be shared, but a single ID should apply to one and only one element. Otherwise, your pages will not validate and rendering problems will ensue.

[broniusm]

A more traditional approach may be, then, to have a global variable that identifies the "current_tab". All tabs will have a css class of tabActive or tabInactive, initially all tabInactive.

On click of a tab, set the current_tab css class to inactive (obj.className = 'tabInactive') and set current_tab to the tab clicked (current_tab = event.srcElement). Then, set current_tab's class to tabActive.

[Storyman]

Here's what I've been able to construct using Jason Teague's book "DHTML and CSS Advanced."

What happens is when a link is clicked it runs the function showPage. It uses the class .page to hide/display each section.

Is there a way to make it so instead of clicking on the link the same thing will happen when the cursor rolls over the link?

The Function
-------------------------------------------------
<script language="javascript" type="text/javascript">
var objPage = null;
function showPage(pageName) {
if (objPage) objPage.style.display = 'none';
objPage=document.getElementById(pageName);
objPage.style.display = 'block'
}
</script>

-------------------------------------------------
CSS Class .page
-------------------------------------------------
<style type="text/css">
.page { display:none;}
</style>

-------------------------------------------------
The Link
-------------------------------------------------
<a href="javascript:showPage('page1')" target="_self">This is the section</a>

-------------------------------------------------
The Section to display
-------------------------------------------------
<div id="page1" class="page">
<h2>This Is the Section</h2>

[broniusm]

In effect, that's the same as what I'd posted (the 2nd time). That's a relief :)

In IE, you can add an "onMouseOver" eventhandler to any element on the page:

<a href="javascript:null" onMouseOver="showPage('page1')" target="_self">This is the section</a> 

[Storyman]

broniusm,

That did the trick. Thanks.

I'm at the point with javascript where I can look at the code and pretty well figure out what is going on, but not at the stage where I can create my own code.

[broniusm]

Storyman-
glad you got it worked out.

Be sure to bookmark this Microsoft DHTML reference [msdn.microsoft.com] for your toolbox. onMouseOver is described under "Events".