Layers

[dlyles]

I'm sure this is a simple one. I'm totally new to this layers thing (ok, and JS in general) and I'm trying to create 5 with onclick properties.

What am I doing wrong that the labels don't show and not show correctly?

<td><img src="images/personal.gif" width="90" height="20" onClick="MM_showHideLayers('Layer1','','show','Layer2','Layer3','Layer4','Layer5','','hide')" value="layer1"></td>
<td><img src="images/education.gif" width="90" height="20" onClick="MM_showHideLayers('Layer2','','show','Layer1','Layer3','Layer4','Layer5','','hide')" value="layer2"></td>
<td><img src="images/employment.gif" width="90" height="20" onClick="MM_showHideLayers('Layer3','','show','Layer1','Layer2','Layer4','Layer5','','hide')" value="layer3"></td>
<td><img src="images/interviews.gif" width="90" height="20" onClick="MM_showHideLayers('Layer4','','show','Layer1','Layer2','Layer3','Layer5','','hide')" value="layer4"></td>
<td><img src="images/contacthistory.gif" width="90" height="20" onClick="MM_showHideLayers('Layer5','','show','Layer1','Layer2','Layer3','Layer4','','hide')" value="layer5"></td>

Thank you in advance.

 

[BabyJeffy]

What am I doing wrong that the labels don't show and not show correctly?

You are wrapping your code in TD tags. These are not "layers" but represent the table cell tag (usually seen nested within a TR tag and within that, a TABLE tag).

You might get a better experience using a DIV:

[b]<div>[/b]
<img src="images/personal.gif" width="90" height="20" onClick="MM_showHideLayers('Layer1','','show','Layer2','Layer3','Layer4','Layer5','','hide')" value="layer1">
[b]</div>[/b]

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[dlyles]

I don't know if this makes a difference, but I am using div tags, it was just too much to print.

I have<div id="Layer1">bla bla bla</div>
<div id="Layer2">bla bla bla</div>
Also on the page, I reference the layers css parameters.

thanks.

 

[monksnake]

I don't know what the function MM_showHideLayers() does exactly, so I have no idea what is going on.

<.

 

[trollacious]

I'd throw out the canned Dreamweaver code and write something more concise and specific, probably something like this.

var numlayers = 5;
function ShowHideLayers(toShow)
{
document.getElementById('Layer' + toShow).visibility = 'visible';

for (var li = 1; li <= numlayers; li++)
  {
  if (li != toShow)
    {
    document.getElementById('Layer' + li).visibility = 'hidden';
    }
  }
}

You could change the visibility property to display and use block and none, as well, depending on the effect you want.

Lee

 

[dlyles]

Thanks.

Ok, I'm going to be the real idiot and ask how and where i'm placing this? How am I changing what I have?

 

[trollacious]

Sorry about that. I forgot to show where to replace the function calls.

<td><img src="images/personal.gif" width="90" height="20" onClick="ShowHideLayers(1)" value="layer1"></td>
    <td><img src="images/education.gif" width="90" height="20" onClick="ShowHideLayers(2)" value="layer2"></td>
    <td><img src="images/employment.gif" width="90" height="20" onClick="ShowHideLayers(3)" value="layer3"></td>
    <td><img src="images/interviews.gif" width="90" height="20" onClick="ShowHideLayers(4)" value="layer4"></td>
    <td><img src="images/contacthistory.gif" width="90" height="20" onClick="ShowHideLayers(5)" value="layer5"></td>

Lee

 

[dlyles]

Ok, I'm still having trouble. Maybe you can have a look at it.

http://www.staff-n-track.kuumbasolutions.net/newprofile.asp?app=1665

Here's what I have


#Layer1 {
position:absolute;
width:200px;
height:415px;
z-index:1;
left: 200px;
top: 120px;
visibility: hidden;
}
#Layer2 {
position:absolute;
width:200px;
height:415px;
z-index:2;
left: 200px;
top: 120px;
visibility: visible;
}
#Layer3 {
position:absolute;
width:200px;
height:415px;
z-index:3;
left: 200px;
top: 120px;
visibility: hidden;
}
#Layer4 {
position:absolute;
width:200px;
height:415px;
z-index:4;
left: 200px;
top: 120px;
visibility: visible;
}
#Layer5 {
position:absolute;
width:200px;
height:415px;
z-index:5;
left: 200px;
top: 120px;
visibility: visible;
}
-->

<script type="text/javascript">
var numlayers = 5;
function ShowHideLayers(toShow)
{
document.getElementById('Layer' + toShow).visibility = 'visible';

for (var li = 1; li <= numlayers; li++)
{
if (li != toShow)
{
document.getElementById('Layer' + li).visibility = 'hidden';
}
}
}

</script>


in the body I have

<td><img src="images/personal.gif" width="90" height="20" onClick="ShowHideLayers(1)" value="layer1"></td>
<td><img src="images/education.gif" width="90" height="20" onClick="ShowHideLayers(2)" value="layer2"></td>
<td><img src="images/employment.gif" width="90" height="20" onClick="ShowHideLayers(3)" value="layer3"></td>
<td><img src="images/interviews.gif" width="90" height="20" onClick="ShowHideLayers(4)" value="layer4"></td>
<td><img src="images/contacthistory.gif" width="90" height="20" onClick="ShowHideLayers(5)" value="layer5"></td>

Thanks.

 

[trollacious]

For one thing, you have the script you show inside the style tags (which you don't show here, but I saw it on the page source). You also have an external Javascript at the top without the closing script tag, and the Javascript right after that has no opening script tag (no, you can't mix and match like you did).

If you use Firefox, you'll have access to a MUCH better debugging tool than with IE.

Lee