molily: in mehreren Zellen Text bei mouseover austauschen

Beitrag lesen

Hallo,

puh, soviel JavaScript-Code, ich würde das viel einfacher mit CSS und JavaScript lösen. Mit CSS kann man viel einfacher Regeln formulieren, welche Elemente in welchen Fällen angezeigt werden sollen. Dann ändert man letztlich nur eine Klasse und schon gelten andere CSS-Regeln:

<html>
<head>
<style type="text/css">
/* Das gewünschte span-Elemente je nach gegenwärtiger Klasse einblenden: */
.in0 .s1, .in1 .s1, .in2 .s2, .in3 .s3, .in4 .s4 {display:inline;}
/* Standardmäßig alle Antworten ausblenden: */
.s1, .s2, .s3, .s4 {display:none;}
/* Im Falle der Klasse in0 alle Antworten ausblenden: */
.in0 .s1, .in0 .s2, .in0 .s3, .in0 .s4 {display:none;}
/* Wenn eine Antwort eingeblendet wird (inX > 0), die Frage ausblenden: */
.in1 .s0, .in2 .s0, .in3 .s0, .in4 .s0 {display:none;}
</style>
<script type="text/javascript">
function member (num) {
if (document.body)
  /* Vergebe Klasse an body (oder table oder irgendein Elternelement aller span-Elemente) */
  document.body.className = "in" + num;
}
</script>
</head>
<body>

<table id="table" width="180" border="1" cellspacing="0" cellpadding="5">
<tr>
<td>
<span class="s0">frage1</span>
<span class="s1">antwort 1 member1</span>
<span class="s2">antwort 1 member2</span>
<span class="s3">antwort 1 member3</span>
<span class="s4">antwort 1 member4</span>
</td>
</tr>
<tr>
<td>
<span class="s0">frage2</span>
<span class="s1">antwort 2 member1</span>
<span class="s2">antwort 2 member2</span>
<span class="s3">antwort 2 member3</span>
<span class="s4">antwort 2 member4</span>
</td>
</tr>
<tr>
<td>
<span class="s0">frage3</span>
<span class="s1">antwort 3 member1</span>
<span class="s2">antwort 3 member2</span>
<span class="s3">antwort 3 member3</span>
<span class="s4">antwort 3 member4</span>
</td>
</tr>
</table>

<p>W&auml;hlen sie ein Mitglied, um dessen Antworten zu sehen.<br>
<!-- Hier nur noch die Nummer übergeben, 0 zum Zurücksetzen: -->
<a onmouseover="member(1)" onmouseout="member(0)">member1</a><br>
<a onmouseover="member(2)" onmouseout="member(0)">member2</a><br>
<a onmouseover="member(3)" onmouseout="member(0)">member3</a><br>
<a onmouseover="member(4)" onmouseout="member(0)">member4</a></p>

</body>
</html>

Mathias