nicht angemeldet
Tabelle mit Hover effekt
Also, ich will hab da ein Problem:
Ich will mir eine kleine Seite bastel die so "Dynamisch" wie möglich sein soll.
Also ich hab eine Tabelle und wenn ich mit der Maus auf einer der Zellen komme soll die ganze Zeile die Hintergrundfarbe ändern, ich hatte es bisher so versucht:
<html>
<body bgcolor="#000000" text="#ffffff">
<table>
<tr>
<td align="center" valign="middle" onmouseover="this.style.backgroundColor='#ffffff';" onmouseout="this.style.backgroundColor='#000000';">Test</td>
</tr>
</table>
</body>
</html>
Mir wäre es aber zu umständlich das für jede Zeile zu machen, außerdem ändert sich dann nur die jeweilige Zelle.
Ich würde es alles gerne in eine Java Funktion bringen, weiß aber nicht genau wie, ich sag schonmal Danke
-
Hallo Moritz,
Also, ich will hab da ein Problem:
Willst du eins oder hast du eins? ;)
Ich würde es alles gerne in eine Java Funktion bringen
Warum auf einmal Java? Wenn, dann meinst du sicher JavaScript. Aber hier ist
CSS doch viel schöner.Es gibt das Pseudo-Format :hover, füge das in die Tabellenzeile entsprechend
ein und es sollte gehen. Verwende auch sonst weitestgehend CSS und nicht
die Attribute in den HTML-Tags.
Zu ersterem ein wenig Lektüre: http://forum.de.selfhtml.org/archiv/2003/7/51878/Grüße
David--
>>Nobody will ever need more than 640k RAM!<<
1981 Bill Gates -
Hallo,
Du kannst es zB so machen und eine Funktion navOut und navOver definieren, die dann Deine Farbänderung einmal festlegt:
<tr>
<td onmouseout="navOut(this)" onmouseover="navOver(this)">...</td>
</tr>Wenn es übrigens um ein klickbares Menü geht, dann würde ich mir mal das Menü von cnn.com anschauen! Die haben das ganz elegant gelöst.
Ansonsten gibt es auch einen Selfhtml-Feature-Artikel, der ganz ohne JavaScript auskommt und nur CSS benutzt.
Heiner
-
Mit weniger Aufwand lässt sich das mit CSS bewerkstelligen:
<html>
<style type="text/css">
<!--
.hin {
background-color:gainsboro;
color:red;
}
.zurueck {
background-color:transparent;
}
-->
</style>
</head><body>
<table border="1" width="500">
<tr>
<td onMouseOver="this.className='hin';" onMouseOut="this.className='zurueck';">Zelle 1</td>
<td>Zelle 2</td>
</tr>
</table>
</body>
</html>hat den Vorteil, dass du nicht jedesmal die Farbangaben wiederholen musst im td-Container. Und wenn du die Hintergrundfarben ändern willst, brauchst du das nur einmal zu machen: in der Style-Definition.
mfg
Mike-
Hallo Mike,
Mit weniger Aufwand lässt sich das mit CSS bewerkstelligen:
<td onMouseOver="this.className='hin';" onMouseOut="this.className='zurueck';">Zelle 1</td>Aha. Und warum verwendest du dann zusätzlich JavaScript?
Grüße
David--
>>Nobody will ever need more than 640k RAM!<<
1981 Bill Gates-
hab ja nicht gesagt, dass ich keins verwende. wie soll sich denn sonst die farbe ändern? auf guten zuspruch? ?:-)
Hallo Mike,
Mit weniger Aufwand lässt sich das mit CSS bewerkstelligen:
<td onMouseOver="this.className='hin';" onMouseOut="this.className='zurueck';">Zelle 1</td>
Aha. Und warum verwendest du dann zusätzlich JavaScript?Grüße
David-
Hallo Mike,
wie soll sich denn sonst die farbe ändern?
mit tr:hover { background-color:...; } wie David schon vorschlug (tr, nicht td - Moritz wollte die ganze Zeile ändern, nicht nur eine Zelle).
auf guten zuspruch? ?:-)
na einen Versuch wäre es doch mal Wert :-)
Hallo Mike,
[...]
Grüße
DavidGrüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
-
-
-