Layers and Button Behaviours...

E

Easily Confused

So this is part 7 of the same problem. I followed your advice - started from scratch, drew new layers and made sure they weren't nested within one another. I think I have everything layed out right; however, when I click on my tabs at the top of the screen in preview mode, I get the same effect.
I can see that I am really close - yet so far!
What I want is when the page loads, it defaults to the layer have set to be visible ("layer 4") - then when the "General" button is clicked, it loads "layer 1" with it's information respectivley, then when the "Personnel Policies" button is clicked, it loads "layer 2" and does away with the information that was in "layer 1". As it is, they just pile on top of one another - so all the text loads which of course renders it unreadable.
As always, your help is greatlt appreciated!
Here is the code from this attempt:

<body onload="FP_preloadImgs(/*url*/'button71.gif', /*url*/'button72.gif', /*url*/'button83.jpg', /*url*/'button84.jpg', /*url*/'button8C.jpg', /*url*/'button8D.jpg', /*url*/'button92.gif', /*url*/'button93.gif', /*url*/'button9D.gif', /*url*/'button9E.gif')"><div style="position: absolute; left: 11px; top: 50px; width: 800px; height: 600px; z-index: 1; visibility: hidden; border-style: solid; border-color: #F5B9B9; " id="layer1">&nbsp;<p align="center"><u><b><font face="Tahoma">General Information - Table of
Contents</font></b></u></p><p>&nbsp;</p><p>&nbsp;</p></div><div style="position: absolute; left: 10px; top: 50px; width: 800px; height: 600px; z-index: 2; visibility: hidden; border-style: solid; border-color: #BBFF99" id="layer2">&nbsp;<p align="center"><u><font face="Tahoma"><b>Personnel Policies - Table of
Contents</b></font></u></div><div style="position: absolute; left: 10px; top: 50px; width: 800px; height: 600px; z-index: 3; visibility: hidden; border-style: solid; border-color: #ACCDFB" id="layer3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<p align="center"><u><b><font face="Tahoma">Firm Policies - Table of
Contents</font></b></u></div><p><img border="0" id="img4" src="button9C.gif" height="36" width="108" alt="Introduction" fp-style="fp-btn: Metal Tab 5; fp-transparent: 1" fp-title="Introduction" onclick="FP_changeProp(/*id*/'layer4',0,'style.visibility','visible')" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9D.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button9C.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9E.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button9D.gif')"><img border="0" id="img1" src="button82.jpg" height="36" width="108" alt="General" fp-style="fp-btn: Metal Tab 7" fp-title="General" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button83.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button82.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button84.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button83.jpg')" onclick="FP_changeProp(/*id*/'layer1',0,'style.visibility','inherit')"><img border="0" id="img2" src="button70.gif" height="36" width="108" alt="Personnel Policies" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button71.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button70.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button72.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button71.gif')" fp-style="fp-btn: Metal Tab 2; fp-transparent: 1" fp-title="Personnel Policies" onclick="FP_changeProp(/*id*/'layer2',0,'style.visibility','inherit')"><img border="0" id="img3" src="button8B.jpg" height="36" width="108" alt="Firm Policies" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8C.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8B.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8D.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8C.jpg')" fp-style="fp-btn: Metal Tab 1" fp-title="Firm Policies" onclick="FP_changeProp(/*id*/'layer3',0,'style.visibility','inherit')"><img border="0" id="img5" src="button91.gif" height="36" width="108" alt="Benefits" onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button92.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button91.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button93.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button92.gif')" fp-style="fp-btn: Metal Tab 9; fp-transparent: 1" fp-title="Benefits"></p><div style="position: absolute; left: 11px; top: 50px; width: 800px; height: 600px; z-index: 4; visibility: visible; border-style: solid; border-color: #9DE260; " id="layer4">&nbsp;<p align="left"><font face="Tahoma"><u><b>Introduction:</b></u></font></p><ul>
 
J

John Jansen \(MSFT\)

I think that the only thing you forgot was to click "Restore on mouseout
event" in the behavior dialog, and then change this to be ondblclick (or
whatever) instead of onmouseout.

--
Thanks!
John Jansen
Micosoft Office FrontPage
This posting is provided "AS IS" with no warranties, and confers no rights.
Easily Confused said:
So this is part 7 of the same problem. I followed your advice - started
Click to expand...
from scratch, drew new layers and made sure they weren't nested within one
another. I think I have everything layed out right; however, when I click on
my tabs at the top of the screen in preview mode, I get the same effect.
I can see that I am really close - yet so far!
What I want is when the page loads, it defaults to the layer have set to
Click to expand...
be visible ("layer 4") - then when the "General" button is clicked, it loads
"layer 1" with it's information respectivley, then when the "Personnel
Policies" button is clicked, it loads "layer 2" and does away with the
information that was in "layer 1". As it is, they just pile on top of one
another - so all the text loads which of course renders it unreadable.
As always, your help is greatlt appreciated!
Here is the code from this attempt:

<body onload="FP_preloadImgs(/*url*/'button71.gif', /*url*/'button72.gif',
Click to expand...
/*url*/'button83.jpg', /*url*/'button84.jpg', /*url*/'button8C.jpg',
/*url*/'button8D.jpg', /*url*/'button92.gif', /*url*/'button93.gif',
/*url*/'button9D.gif', /*url*/'button9E.gif')"><div style="position:
absolute; left: 11px; top: 50px; width: 800px; height: 600px; z-index: 1;
visibility: hidden; border-style: solid; border-color: #F5B9B9; "
id="layer1">&nbsp; said:
Contents</font></b></u></p><p>&nbsp;</p><p>&nbsp;</p></div><div
Click to expand...
style="position: absolute; left: 10px; top: 50px; width: 800px; height:
600px; z-index: 2; visibility: hidden; border-style: solid; border-color:
#BBFF99" id="layer2">&nbsp; said:
Contents</b></font></u></div><div style="position: absolute; left: 10px;
Click to expand...
top: 50px; width: 800px; height: 600px; z-index: 3; visibility: hidden;
border-style: solid; border-color: #ACCDFB"
id="layer3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<p align="center"><u><b><font face="Tahoma">Firm Policies - Table of
Contents</font></b></u></div><p><img border="0" id="img4"
Click to expand...
src="button9C.gif" height="36" width="108" alt="Introduction"
fp-style="fp-btn: Metal Tab 5; fp-transparent: 1" fp-title="Introduction"
onclick="FP_changeProp(/*id*/'layer4',0,'style.visibility','visible')"
onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9D.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button9C.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9E.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button9D.gif')"><img
border="0" id="img1" src="button82.jpg" height="36" width="108"
alt="General" fp-style="fp-btn: Metal Tab 7" fp-title="General"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button83.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button82.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button84.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button83.jpg')"
onclick="FP_changeProp(/*id*/'layer1',0,'style.visibility','inherit')"><img
border="0" id="img2" src="button70.gif" height="36" width="108"
alt="Personnel Policies"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button71.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button70.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button72.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button71.gif')"
fp-style="fp-btn: Metal Tab 2; fp-transparent: 1" fp-title="Personnel
Policies"
onclick="FP_changeProp(/*id*/'layer2',0,'style.visibility','inherit')"><img
border="0" id="img3" src="button8B.jpg" height="36" width="108" alt="Firm
Policies" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8C.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8B.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8D.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8C.jpg')"
fp-style="fp-btn: Metal Tab 1" fp-title="Firm Policies"
onclick="FP_changeProp(/*id*/'layer3',0,'style.visibility','inherit')"><img
border="0" id="img5" src="button91.gif" height="36" width="108"
alt="Benefits"
onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button92.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button91.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button93.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button92.gif')"
fp-style="fp-btn: Metal Tab 9; fp-transparent: 1"
fp-title="Benefits"></p><div style="position: absolute; left: 11px; top:
50px; width: 800px; height: 600px; z-index: 4; visibility: visible;
border-style: solid; border-color: #9DE260; " id="layer4">&nbsp;<p
align="left"><font face="Tahoma"><u><b>Introduction:</b></u></font></p><ul>
 
E

Easily Confused

I changed the onmouse out properties to ondblclick - now I can double click the tabs and it loads/unloads the information, but doesn't work if I click on the next tab - it still drops the next layer on top, combining the two layers. Below is the code - again
Thanks for your help

<body onload="FP_preloadImgs(/*url*/'button71.gif', /*url*/'button72.gif', /*url*/'button83.jpg', /*url*/'button84.jpg', /*url*/'button8C.jpg', /*url*/'button8D.jpg', /*url*/'button92.gif', /*url*/'button93.gif', /*url*/'button9D.gif', /*url*/'button9E.gif')"><div style="position: absolute; left: 11px; top: 50px; width: 800px; height: 600px; z-index: 1; visibility: hidden; border-style: solid; border-color: #F5B9B9; " id="layer1">&nbsp;<p align="center"><u><b><font face="Tahoma">General Information - Table of
Contents</font></b></u></p><p>&nbsp;</p><p>&nbsp;</p></div><div style="position: absolute; left: 10px; top: 50px; width: 800px; height: 600px; z-index: 2; visibility: hidden; border-style: solid; border-color: #BBFF99" id="layer2">&nbsp;<p align="center"><u><font face="Tahoma"><b>Personnel Policies - Table of
Contents</b></font></u></div><div style="position: absolute; left: 10px; top: 50px; width: 800px; height: 600px; z-index: 3; visibility: hidden; border-style: solid; border-color: #ACCDFB" id="layer3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
<p align="center"><u><b><font face="Tahoma">Firm Policies - Table of
Contents</font></b></u></div><p><img border="0" id="img4" src="button9C.gif" height="36" width="108" alt="Introduction" fp-style="fp-btn: Metal Tab 5; fp-transparent: 1" fp-title="Introduction" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9D.gif')" onmouseout=" FP_swapImg(0,0,/*id*/'img4',/*url*/'button9C.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9E.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button9D.gif')" ondblclick="FP_changePropRestore(); FP_changeProp(/*id*/'layer4',1,'style.visibility','inherit')"><img border="0" id="img1" src="button82.jpg" height="36" width="108" alt="General" fp-style="fp-btn: Metal Tab 7" fp-title="General" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button83.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button82.jpg');" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button84.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button83.jpg')" onclick="FP_changeProp(/*id*/'layer1',1,'style.visibility','inherit')" ondblclick="FP_changePropRestore()"><img border="0" id="img2" src="button70.gif" height="36" width="108" alt="Personnel Policies" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button71.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button70.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button72.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button71.gif')" fp-style="fp-btn: Metal Tab 2; fp-transparent: 1" fp-title="Personnel Policies" onclick="FP_changeProp(/*id*/'layer2',0,'style.visibility','inherit')"><img border="0" id="img3" src="button8B.jpg" height="36" width="108" alt="Firm Policies" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8C.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8B.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8D.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8C.jpg')" fp-style="fp-btn: Metal Tab 1" fp-title="Firm Policies" onclick="FP_changeProp(/*id*/'layer3',0,'style.visibility','inherit')"><img border="0" id="img5" src="button91.gif" height="36" width="108" alt="Benefits" onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button92.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button91.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button93.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button92.gif')" fp-style="fp-btn: Metal Tab 9; fp-transparent: 1" fp-title="Benefits"></p><div style="position: absolute; left: 11px; top: 50px; width: 800px; height: 600px; z-index: 4; visibility: hidden; border-style: solid; border-color: #CCCCCC" id="layer4">&nbsp;<p align="left"><font face="Tahoma"><u><b>Introduction:</b></u></font></p>
 
J

John Jansen \(MSFT\)

The toughest part about this is that it only does exactly what you tell it
to do, not what you might want it to do. Ah computers.

You should just need to add more behaviors to your page. So that if you
click on one of the other buttons, not only does it show that layer, but it
hides the other layers.

It can get pretty complex pretty fast, which is why I initially said you may
want to follow the other advice of using an Iframe, because that is just a
lot easier.

--
Thanks!
John Jansen
Micosoft Office FrontPage
This posting is provided "AS IS" with no warranties, and confers no rights.
Easily Confused said:
I changed the onmouse out properties to ondblclick - now I can double
Click to expand...
click the tabs and it loads/unloads the information, but doesn't work if I
click on the next tab - it still drops the next layer on top, combining the
two layers. Below is the code - again.
Thanks for your help!

<body onload="FP_preloadImgs(/*url*/'button71.gif', /*url*/'button72.gif',
Click to expand...
/*url*/'button83.jpg', /*url*/'button84.jpg', /*url*/'button8C.jpg',
/*url*/'button8D.jpg', /*url*/'button92.gif', /*url*/'button93.gif',
/*url*/'button9D.gif', /*url*/'button9E.gif')"><div style="position:
absolute; left: 11px; top: 50px; width: 800px; height: 600px; z-index: 1;
visibility: hidden; border-style: solid; border-color: #F5B9B9; "
id="layer1">&nbsp; said:
Contents</font></b></u></p><p>&nbsp;</p><p>&nbsp;</p></div><div
Click to expand...
style="position: absolute; left: 10px; top: 50px; width: 800px; height:
600px; z-index: 2; visibility: hidden; border-style: solid; border-color:
#BBFF99" id="layer2">&nbsp; said:
Contents</b></font></u></div><div style="position: absolute; left: 10px;
Click to expand...
top: 50px; width: 800px; height: 600px; z-index: 3; visibility: hidden;
border-style: solid; border-color: #ACCDFB"
id="layer3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<p align="center"><u><b><font face="Tahoma">Firm Policies - Table of
Contents</font></b></u></div><p><img border="0" id="img4"
Click to expand...
src="button9C.gif" height="36" width="108" alt="Introduction"
fp-style="fp-btn: Metal Tab 5; fp-transparent: 1" fp-title="Introduction"
onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9D.gif')"
onmouseout=" FP_swapImg(0,0,/*id*/'img4',/*url*/'button9C.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9E.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button9D.gif')"
ondblclick="FP_changePropRestore();
FP_changeProp(/*id*/'layer4',1,'style.visibility','inherit')"><img
border="0" id="img1" src="button82.jpg" height="36" width="108"
alt="General" fp-style="fp-btn: Metal Tab 7" fp-title="General"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button83.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button82.jpg');"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button84.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button83.jpg')"
onclick="FP_changeProp(/*id*/'layer1',1,'style.visibility','inherit')"
ondblclick="FP_changePropRestore()"><img border="0" id="img2"
src="button70.gif" height="36" width="108" alt="Personnel Policies"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button71.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button70.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button72.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button71.gif')"
fp-style="fp-btn: Metal Tab 2; fp-transparent: 1" fp-title="Personnel
Policies"
onclick="FP_changeProp(/*id*/'layer2',0,'style.visibility','inherit')"><img
border="0" id="img3" src="button8B.jpg" height="36" width="108" alt="Firm
Policies" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8C.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8B.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8D.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8C.jpg')"
fp-style="fp-btn: Metal Tab 1" fp-title="Firm Policies"
onclick="FP_changeProp(/*id*/'layer3',0,'style.visibility','inherit')"><img
border="0" id="img5" src="button91.gif" height="36" width="108"
alt="Benefits"
onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button92.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button91.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button93.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button92.gif')"
fp-style="fp-btn: Metal Tab 9; fp-transparent: 1"
fp-title="Benefits"></p><div style="position: absolute; left: 11px; top:
50px; width: 800px; height: 600px; z-index: 4; visibility: hidden;
border-style: solid; border-color: #CCCCCC" id="layer4">&nbsp;<p
align="left"><font face="Tahoma"><u><b>Introduction:</b></u></font></p>
 
J

jon spivey

Hi,
trying to do something like this with behaviours can get complicated. I'd
write a little script to remember the currently visible layer, eg
<script type="text/javascript">
function showHide(s){
if(document.menuOpen){
t=FP_getObjectByID(document.menuOpen);
t=(document.layers)?t:t.style;t.visibility=(document.layers)?'show':'visible
';}
q=FP_getObjectByID(s);
q=(document.layers)?q:q.style;q.visibility=(document.layers)?'show':'visible
';
document.menuOpen = s}
</script>

Now you can just call the script on each button, eg
<a href="javascript:;" onclick="showHide('layer1'); return false"><img
src="...etc
<a href="javascript:;" onclick="showHide('layer2'); return false"><img
src="...etc
This will show the layer you want and hide any that is currently visible -
you can add swapimage behaviours to the buttons too. Another bonus of doing
it this way is you get NN4 compatability

Also you should delete the height settings from all your layers - modern
browsers (especially Moz based browsers) will give problems if the content
of a layer is taller than it's declared height. If you omit the height the
layer will expand to hold its content.

--
Jon
Microsoft MVP - FP


Easily Confused said:
I changed the onmouse out properties to ondblclick - now I can double
Click to expand...
click the tabs and it loads/unloads the information, but doesn't work if I
click on the next tab - it still drops the next layer on top, combining the
two layers. Below is the code - again.
Thanks for your help!

<body onload="FP_preloadImgs(/*url*/'button71.gif', /*url*/'button72.gif',
Click to expand...
/*url*/'button83.jpg', /*url*/'button84.jpg', /*url*/'button8C.jpg',
/*url*/'button8D.jpg', /*url*/'button92.gif', /*url*/'button93.gif',
/*url*/'button9D.gif', /*url*/'button9E.gif')"><div style="position:
absolute; left: 11px; top: 50px; width: 800px; height: 600px; z-index: 1;
visibility: hidden; border-style: solid; border-color: #F5B9B9; "
id="layer1">&nbsp; said:
Contents</font></b></u></p><p>&nbsp;</p><p>&nbsp;</p></div><div
Click to expand...
style="position: absolute; left: 10px; top: 50px; width: 800px; height:
600px; z-index: 2; visibility: hidden; border-style: solid; border-color:
#BBFF99" id="layer2">&nbsp; said:
Contents</b></font></u></div><div style="position: absolute; left: 10px;
Click to expand...
top: 50px; width: 800px; height: 600px; z-index: 3; visibility: hidden;
border-style: solid; border-color: #ACCDFB"
id="layer3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<p align="center"><u><b><font face="Tahoma">Firm Policies - Table of
Contents</font></b></u></div><p><img border="0" id="img4"
Click to expand...
src="button9C.gif" height="36" width="108" alt="Introduction"
fp-style="fp-btn: Metal Tab 5; fp-transparent: 1" fp-title="Introduction"
onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9D.gif')"
onmouseout=" FP_swapImg(0,0,/*id*/'img4',/*url*/'button9C.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9E.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button9D.gif')"
ondblclick="FP_changePropRestore();
FP_changeProp(/*id*/'layer4',1,'style.visibility','inherit')"><img
border="0" id="img1" src="button82.jpg" height="36" width="108"
alt="General" fp-style="fp-btn: Metal Tab 7" fp-title="General"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button83.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button82.jpg');"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button84.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button83.jpg')"
onclick="FP_changeProp(/*id*/'layer1',1,'style.visibility','inherit')"
ondblclick="FP_changePropRestore()"><img border="0" id="img2"
src="button70.gif" height="36" width="108" alt="Personnel Policies"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button71.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button70.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button72.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button71.gif')"
fp-style="fp-btn: Metal Tab 2; fp-transparent: 1" fp-title="Personnel
Policies"
onclick="FP_changeProp(/*id*/'layer2',0,'style.visibility','inherit')"><img
border="0" id="img3" src="button8B.jpg" height="36" width="108" alt="Firm
Policies" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8C.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8B.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button8D.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8C.jpg')"
fp-style="fp-btn: Metal Tab 1" fp-title="Firm Policies"
onclick="FP_changeProp(/*id*/'layer3',0,'style.visibility','inherit')"><img
border="0" id="img5" src="button91.gif" height="36" width="108"
alt="Benefits"
onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button92.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button91.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button93.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button92.gif')"
fp-style="fp-btn: Metal Tab 9; fp-transparent: 1"
fp-title="Benefits"></p><div style="position: absolute; left: 11px; top:
50px; width: 800px; height: 600px; z-index: 4; visibility: hidden;
border-style: solid; border-color: #CCCCCC" id="layer4">&nbsp;<p
align="left"><font face="Tahoma"><u><b>Introduction:</b></u></font></p>
 
N

No Longer Confused!

Eureka! Thanks to you saying "You should just need to add more behaviors to your page" - I wasn't thinking that "more was good". I was thinking in terms of "click on - click off" - "whats so hard about that
The light bulb lit up
It works great now - although I have 5 tabs, and 6 behaviours for each tab - it's a bit to keep track of but what the hey - it's strictly internal

I have never had any formal training in html or programming anything otherwise. I'm simply a lowly IT Admin who was handed the job because I'm the only "computer savvy" person in an office of 120
Not complaining - it's job security

I really appreciate all the help you gave me - I think I would have pretty much given up and printed the manual off to distribute it

Again - my thanks

Darcy Remlinge
IT Administrato
McKercher McKercher & Whitmor
Barristers & Solicitors
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Web Site Code Anomally? 1
I'm confused over the mouse rollover effects and javascript 1
FP2003 - Interactive buttons 4
frontpage not showing img on another server 3
Interactive Button not changing on mouseover 3
looks different in firefox then explorer 1
How can i center my page? 1
Changing multiple images with onmouseover 1

Top