nicht angemeldet
guten morgen ebenfalls
Bei klick auf einen Link, soll dieser layer sichtbar werden. Entweder über eine Erhöhung des z-index, oder auch über eine Änderung des visibility-Wertes. Das ist egal.
Das ist es meines Wissens nicht. Der z-index bestimmt die Schichtposition, aber nicht die "Sichtbarkeit". Du solltest das also über "visibility" machen.
Wie bekomme ich das hin? und ganz wichtig: geht das auch im Netscape 4.x?
Erst einmal: Netscape 4.x macht das mit. Und zur Lösung: an sich ist das relativ einfach, geht mit einer Kombination aus Javascript und CSS. Ich benutze diese Kombination relativ häufig, und weil heute Sonntag ist, mach ich mal was, was ich sonst schön bleiben lasse. Ich setze dir mal meine vollständige Vorlage für eine Seite mit solchen Layern her.
=======================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sichtbare/unsichtbare Layer</title>
<script language="javascript">
<!--
var i = 1;
var schicht = "bereich";
var browserName = navigator.appName;
var browserVersion = parseInt(navigator.appVersion);
var isIE = false;
var isNN = false;
var isDOM = false;
var isDomIE = false;
var isDomNN = false;
isIE = browserName.indexOf("Microsoft Internet Explorer" )==-1?false:true;
isNN = browserName.indexOf("Netscape")==-1?false:true;
isDOM = document.getElementById?true:false;
function verbergen(name) {
if (isDOM) document.getElementById(name).style.visibility="hidden";
if (isDomIE) document.all[name].style.visibility="hidden";
if (isDomNN) document.layers[name].visibility="hidden";
}
function zeigen(name) {
if (isDOM) document.getElementById(name).style.visibility="visible";
if (isDomIE) document.all[name].style.visibility="visible";
if (isDomNN) document.layers[name].visibility="visible";
}
function click(num){
verbergen(eval('"' + schicht + i +'"'));
zeigen(eval('"' + schicht + num +'"'));
i = num;
}
//-->
</script>
<style type="text/css">
<!--
body { margin-top:5px; margin-bottom:15px; background-color:#000011; }
p,h1,h2,h3,h4,ul,ol,li,div,td,b,i { font-family:Helvetica,Arial,Sans-serif; }
h1 { font-size:16pt; }
h2 { font-size:14pt; }
h3 { font-size:12pt; }
h4 { font-size:10pt; }
p,ul,ol,li,div,td,b,i { font-size:9pt; color:#FFFFFF; }
a:link { color:#FFFFFF; text-decoration:none; }
a:visited { color:#FFFFFF; text-decoration:none; }
a:active { color:#FFFFFF; text-decoration:none; }
a:hover { color:#FF0000; text-decoration:none; }
#bereich1 {position: absolute; visibility: visible; left: 160px; width: 800px; top: 10px; background-color:#0000FF; layer-background-color:#0000FF;}
#bereich2 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 40px; background-color:#0000FF; layer-background-color:#0000FF;}
#bereich3 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 70px; background-color:#0000FF; layer-background-color:#0000FF;}
#bereich4 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 100px; background-color:#0000FF; layer-background-color:#0000FF;}
#bereich5 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 120px; background-color:#0000FF; layer-background-color:#0000FF;}
#bereich6 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 150px; background-color:#0000FF; layer-background-color:#0000FF;}
#menu {position: absolute; visibility: visible; left: 10px; width: 120px; top: 70px; z-index: 25;}
//-->
</style>
<base target="_blank">
</head>
<body>
<div ID="bereich1">
<div align="center"><center>
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
<td width="50%"><b>bitte Inhalt eingeben</p></td>
<td width="50%"> </td>
</tr>
</table></center></div>
</div>
<div ID="bereich2">
<div align="center"><center>
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table></center></div>
</div>
<div ID="bereich3">
<div align="center"><center>
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table></center></div>
</div>
<div ID="bereich4">
<div align="center"><center>
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table></center></div>
</div>
<div ID="bereich5">
<div align="center"><center>
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table></center></div>
</div>
<div ID="bereich6">
<div align="center"><center>
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table></center></div>
</div>
<div ID="menu"><b><br>
<a href="javascript:click(1)" target="_self">Bereich 1</a><br><br>
<a href="javascript:click(2)" target="_self">Bereich 2</a><br><br>
<a href="javascript:click(3)" target="_self">Bereich 3</a><br><br>
<a href="javascript:click(4)" target="_self">Bereich 4</a><br><br>
<!--
<a href="javascript:click(5)">bereich5</a><br><br>
<a href="javascript:click(6)">bereich6</a>
//-->
</b>
</div>
</body>
</html>
=======================
Grüße aus Berlin
Christoph S.