nicht angemeldet
Hallo zusammen,
ich bastel jetzt seit ein paar Tagen an einer Tabelle.
Zu verschiedenen Zeilen möchte ich einige zusätzliche Informationen einbauen, diese sollen aber ein- und ausblendbar sein, da es sonst zu schnell unübersichtlich wird.
Einen Teil des Tabellendesigns habe ich in CSS festgelegt (mit CSS habe ich erst vor ein paar Tagen angefangen, daher habe ich da noch sehr wenig Ahnung).
In der CSS verwende ich folgenden Code:
table
{ border: 1px; width: 100%; cellspacing: 0; padding: 5; }
th
{ background-color: #3D3D3D; border: 2px; height:25; }
.tr1
{ background-color: #666666; height:35; }
.tr1:hover
{ background-color: #953735; }
.tr2
{ background-color: #999999; height:35; }
.tr2:hover
{ background-color: #953735; }
.tr3
{ background-color: #953735; height:35; }
In der HTML habe ich folgendes verwendet:
<h2>Tabelle</h2>
<table>
<colspan>
<col width="3%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="57%">
</colspan>
<tr>
<th></td>
<th><b>Jahr</b></th>
<th><b>Monat</b></th>
<th><b>Tag</b></th>
<th><b>Geburtstag</b></th>
</tr>
<tr class="tr1">
<td><div align="center"><img src="..\01-bilder\pfeile\kasten-rot1-rechts.gif" onClick="getElementById('max-mustermann').style.display='block'"></div></td>
<td>1991</td>
<td>07</td>
<td>21</td>
<td>Max Mustermann</td>
</tr></table>
<table id="max-mustermann" style="display:none">
<tr class="tr3">
<td width="3%"><div align="center"><img src="..\01-bilder\pfeile\kasten-rot1-hoch.gif" onClick="getElementById('max-mustermann').style.display='none'"></div></td>
<td>Geboren im Stadtkrankenhaus, Musterstadt...</td>
</tr>
</table>
<table>
<colspan>
<col width="3%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="57%">
</colspan>
<tr class="tr2">
<td width="3%"><div align="center"><img src="..\01-bilder\pfeile\kasten-grau-rechts.gif"></div></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Das mit dem auf- und zu klappen funktioniert wunderbar.
Jetzt möchte ich aber, dass die Zeile, aus der die Aufgeklappte hervorkam (in diesem Fall die mit der class="tr1"), in demselben Farbton hinterlegt wird, wie die Zeile mit den Zusatzinformationen, also in #953735. Den Hover-Effekt habe ich bereits in die CCS eingebaut.
Die veränderte Farbe soll aber bleiben, solange die Zusatzzeile aktiviert ist, unabhängig davon, ob die Maus noch in der Zeile steht oder nicht.
Sobald die Zusatzzeile zugeklappt ist, soll die .tr1-Zeile wieder in ihrem "normalen" Farbton, den ich für .tr1 in der CCS festgelegt hatte, angezeigt werden.
Zudem fände ich es schön, wenn der Pfeil aus der ersten Spalte nach unten zeigen würde, sobald man die Zusatzzeile aufgeklappt hat. Wenn die Zusatzzeile wieder zugeklappt ist, soll der Pfeil wieder nach rechts zeigen). Von dem Pfeil habe ich damals vier Versionen angelegt, also kann ich doch theoretisch die img-Datei des Pfeils austauschen? Dann müsste ich es nur wieder umgekehrt machen, wenn die .tr1-Zeile in ihre Ausgangsform zurückkehrt.
Muss ich vielleicht einen "OnClick-" oder "onMouse..."-Effekt einbauen?
Wäre super, wenn mir jemand einen Tipp geben kann. Vielen Dank schon einmal im Vorraus :)