kippie
03-17-2004, 04:12 PM
In the HTML below I want to make it so, that I can choose one layer to disappear. This I what I try to do in the last menuline: "Hide layer1". But instead of only one layer disappearing all layers disappear. Could someone help me to change the function somehow?
This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Welcome to Adobe GoLive 4</title>
<script language="javascript">
function hideLayers() {
var eles = document.getElementsByTagName("div");
for(i=0;i<eles.length;i++) {
document.getElementById(eles[i].id).style.visibility="hidden";
}
}
function showLayer(sel) {
var eles = document.getElementsByTagName("div");
for(i=0;i<eles.length;i++) {
if (eles[i].id==sel) {
document.getElementById(sel).style.visibility="visible";
}
}
}
</script>
<style type="text/css"><!--
#layer { position: absolute; top: 16px; left: 16px; width: 100px; height: 100px; visibility: visible }
#layer2 { position: absolute; top: 148px; left: 217px; width: 100px; height: 100px; visibility: hidden }
#layer3 { position: absolute; top: 155px; left: 16px; width: 100px; height: 100px; visibility: visible }
#layer4 { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: visible }-->
</style>
</head>
<body>
<div id="layer">
This is layer 1</div>
<div id="layer2">
This is layer 2</div>
<div id="layer3">
This is layer 3</div>
<div id="layer4">
This is layer 4</div>
<br><br><br><br><br><br><br><br><br><br>
<a href="javascript:;" onClick="hideLayers();showLayer('layer2');showLayer('layer3')">Make Layer 2 and layer 3 visible; </a><br>
<a href="javascript:;" onClick="showLayer('layer2');">Make Layer 2 visible; </a><br>
<a href="javascript:;" onClick="hideLayers('layer2');showLayer('layer4');showLayer('layer3')">Hide layer2 and show layer 3 and 4</a><br>
<a href="javascript:;" onClick="hideLayers();">Hide all layers</a><br>
<a href="javascript:;" onClick="hideLayers('layer1');">Hide layer1</a><br>
</body>
</html>
This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Welcome to Adobe GoLive 4</title>
<script language="javascript">
function hideLayers() {
var eles = document.getElementsByTagName("div");
for(i=0;i<eles.length;i++) {
document.getElementById(eles[i].id).style.visibility="hidden";
}
}
function showLayer(sel) {
var eles = document.getElementsByTagName("div");
for(i=0;i<eles.length;i++) {
if (eles[i].id==sel) {
document.getElementById(sel).style.visibility="visible";
}
}
}
</script>
<style type="text/css"><!--
#layer { position: absolute; top: 16px; left: 16px; width: 100px; height: 100px; visibility: visible }
#layer2 { position: absolute; top: 148px; left: 217px; width: 100px; height: 100px; visibility: hidden }
#layer3 { position: absolute; top: 155px; left: 16px; width: 100px; height: 100px; visibility: visible }
#layer4 { position: absolute; top: 10px; left: 249px; width: 100px; height: 100px; visibility: visible }-->
</style>
</head>
<body>
<div id="layer">
This is layer 1</div>
<div id="layer2">
This is layer 2</div>
<div id="layer3">
This is layer 3</div>
<div id="layer4">
This is layer 4</div>
<br><br><br><br><br><br><br><br><br><br>
<a href="javascript:;" onClick="hideLayers();showLayer('layer2');showLayer('layer3')">Make Layer 2 and layer 3 visible; </a><br>
<a href="javascript:;" onClick="showLayer('layer2');">Make Layer 2 visible; </a><br>
<a href="javascript:;" onClick="hideLayers('layer2');showLayer('layer4');showLayer('layer3')">Hide layer2 and show layer 3 and 4</a><br>
<a href="javascript:;" onClick="hideLayers();">Hide all layers</a><br>
<a href="javascript:;" onClick="hideLayers('layer1');">Hide layer1</a><br>
</body>
</html>