nicht angemeldet
Hallo liebe Leute,
ich suche ein Menü, dass mir über zwei Menüstränge Bilder übereinander legt.
BsP.:
- Menü 1 mit 3 Buttons steht links
- Menü 2 mit 3 Buttons steht rechts
a - Beim Klick auf einen der Button im rechten Menü wird ein JPG-Bild in der Mitte platziert.
b - Beim Klick auf einen der Button im linken Menü wird ein PNG-Bild über das Bild von Menü rechts gelegt. (PNG soll immer über JPG liegen!)
c - Egal welches Bild man links oder rechts anklickt, es soll immer nur das mit dem letzten Klick gezeigt werden.
Ich suche jetzt schon einige Tage nach einer guten Lösung und habe bisher nur folgendes fertiges Script gefunden. Sieht auch schon sehr gut aus (ist auch aus dem Forum hier aber vo 2002). Ich schaffe es nur nicht, daraus zwei getrennt angesprochene Menüstränge zu machen. Habt ihr eine Idee? Wäre echt super!
<!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>
Matthias Apsel