nicht angemeldet
Hallo
Ich bin am verzweifeln, irgendwo habe ich wohl ein Denkfehler, vieleicht könnt ihr mir helfen.
Ich möchte mit mouseover in einer Tabelle jeweils eine andere Tabelle anzeigen. Soweit klappt das auch, nur sollte beim ersten mal laden die erste Tabelle angezeigt werden. Leider erscheint da aber keine, erst wenn ich mit der Maus über eine der oberen Zellen fahre erscheint die entsprechende Tabelle.
Könnt ihr mir sagen wo ich den Denkfehler habe ?
Hier der Quelltext :
<html>
<head>
<title>TEST</title>
<style type="text/css">
.Rahmen-Tabelle {
border-right : #cccccc 1px solid;
}
.tab-on {
border-right : #cccccc 1px;
border-left : #cccccc 1px solid;
border-top : #cccccc 1px solid;
border-bottom : #cccccc 1px;
padding : 4px;
cursor : hand;
color : #0000cc;
text-align : center;
font-weight : bold;
background-color : #ffffff;
}
.tab-off {
border-right : #cccccc 1px;
border-left : #cccccc 1px solid;
border-top : #cccccc 1px solid;
border-bottom : #cccccc 1px solid;
padding : 4px;
cursor : hand;
color : #999999;
text-align : center;
background-image:url('Bilder/zellen-hintergrund.gif');
}
.tab-none {
border-right : #cccccc 1px;
border-left : #cccccc 1px solid;
border-top : #cccccc 1px;
border-bottom : #cccccc 1px solid;
background-color : transparent;
}
.Inhalt {
border-right : #cccccc 1px;
border-left : #cccccc 1px solid;
border-top : #cccccc 1px;
border-bottom : #cccccc 1px solid;
padding : 5px;
vertical-align : top;
background-color : #ffffff;
}
.td_heading {
border-right : #cccccc 1px;
padding-right : 3px;
border-top : #cccccc 1px;
padding-left : 10px;
padding-bottom : 3px;
border-left : #cccccc 1px;
color : #666666;
padding-top : 3px;
border-bottom : #cccccc 1px dashed;
}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
</style>
<script type="text/javascript">
<!--
var lastObject;
function show (id) {
if (lastObject) document.getElementById(lastObject).style.display = "none";
if (document.getElementById) document.getElementById(id).style.display = "";
lastObject = id;
}
function wechsleInhalt(){
for (var i=1;i<8;i++){
document.getElementById('tabelle'+i).style.display = "none";
}
}
//-->
</script>
</head>
<body onload="wechsleInhalt();">
<table cellspacing="0" cellpadding="0" width="572" border="0"><tr><td class="Rahmen-Tabelle" valign="top">
<table cellspacing="0" cellpadding="0" width="572" border="0">
<tr>
<td class="tab-on" onmouseover="show('tabelle1');return false;" width="50"><font face="Verdana" size="2">Detail</font></td>
<td class="tab-off" onmouseover="show('tabelle2');return false;" width="50"><font face="Verdana" size="2">Detail</font></td>
<td class="tab-off" onmouseover="show('tabelle3');return false;" width="50"><font face="Verdana" size="2">Detail</font></td>
<td class="tab-off" onmouseover="show('tabelle4');return false;" width="50"><font face="Verdana" size="2">Detail</font></td>
<td class="tab-off" onmouseover="show('tabelle5');return false;" width="50"><font face="Verdana" size="2">Detail</font></td>
<td class="tab-off" onmouseover="show('tabelle6');return false;" width="50"><font face="Verdana" size="2">Detail</font></td>
<td class="tab-off" onmouseover="show('tabelle7');return false;" width="50"><font face="Verdana" size="2">Detail</font></td>
</tr>
</table>
<table class="Inhalt" id="tabelle1" width="572" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top"><font face="Verdana" size="2">Text 1</font></td>
</tr></table>
<table class="Inhalt" id="tabelle2" width="572" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top"><font face="Verdana" size="2">Text 2</font></td>
</tr></table>
<table class="Inhalt" id="tabelle3" width="572" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top"><font face="Verdana" size="2">Text 3</font></td>
</tr></table>
<table class="Inhalt" id="tabelle4" width="572" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top"><font face="Verdana" size="2">Text 4</font></td>
</tr></table>
<table class="Inhalt" id="tabelle5" width="572" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top"><font face="Verdana" size="2">Text 5</font></td>
</tr></table>
<table class="Inhalt" id="tabelle6" width="572" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top"><font face="Verdana" size="2">Text 6</font></td>
</tr></table>
<table class="Inhalt" id="tabelle7" width="572" border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top"><font face="Verdana" size="2">Text 7</font></td>
</tr></table>
</td></tr></table>
</body>
</html>
Gruß
Michael