mouseover bei Zellen mit Text
| abcdefg | abcdefg | abcdefg |
Mit diesem Script kannst Du die Hintergrundfarbe der Zelle und gleichzeitig die Schriftfarbe beim mouseover event verändern.
Folgendes kommt in den head:
<style type="text/css">
<!--
td.mOut {
text-align:center;
color:#ffffff;
background-color:#ff0000;
font-weight:bold;
}
td.mOver {
text-align:center;
color:#ffff00;
background-color:#0000ff;
font-weight:bold;
}
-->
</style>
<script type="text/javascript">
<!--
function change(id,klasse) {
document.getElementById(id).className = klasse;
}
//-->
</script>
Und so sieht die Tabelle aus:
<table>
<tr>
<td class="mOut" id="cell1" onmouseover="change(this.id,'mOver')" onmouseout="change(this.id,'mOut')">abcdefg</td>
<td class="mOut" id="cell2" onmouseover="change(this.id,'mOver')" onmouseout="change(this.id,'mOut')">abcdefg</td>
<td class="mOut" id="cell3" onmouseover="change(this.id,'mOver')" onmouseout="change(this.id,'mOut')">abcdefg</td>
</tr>
</table>
Die IDs, die Du den betreffenden Zellen zuweist, können beliebig gewählt werden, nur mußt Du darauf achten, daß jede ID dokumentweit nur einmal verwendet wird. Andernfalls wird der Code invalide und dem Chaos sind Tür und Tor geöffnet, da die Browser bei fehlerhaftem Code machen dürfen, was sie wollen – im glücklichsten Fall wird immer nur die erste betroffene Zelle, die diese ID aufweist, angesprochen, auch wenn Du mit der Maus über eine anderen Zelle bist.
Viel Spaß!