nicht angemeldet
Tabellen ein/aus blenden
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
-
Yerf!
<body onload="wechsleInhalt();">
Hm, damit werden zu Beginn alle Elemente ausgeblendet... weshalb sollte also die erste sichtbar sein?
Fehlt da vielleicht noch ein "show('tabelle1');" hinter dem ersten Funktionsaufruf?
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Ja richtig das wars - Danke.
Nur was ich jetzt gemerkt habe, ich kann zwar die unterschiedlichen Tabellen anzeigen, jedoch sollte sich das Style auch entsprechend ändern von "tab-on" zu "tab-off" ...
Gruß
Michael-
Hi,
Nur was ich jetzt gemerkt habe, ich kann zwar die unterschiedlichen Tabellen anzeigen, jedoch sollte sich das Style auch entsprechend ändern von "tab-on" zu "tab-off" ...
was hast Du versucht, um dieses Verhalten zu erreichen?
Darüber hinaus: Eliminiere bitte *alle* <font>-Elemente. Und da Du schon <font> einsetzt, steigt die Wahrscheinlichkeit mit jeder einzelnen Tabelle exponentiell, dass Du Tabellen für Layout-Zwecke missbrauchst. Erkläre also bitte, welche tabellarischen Daten vorliegen und warum Du beispielsweise auf <tbody> und <thead> verzichtest.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-