Michael: in mehreren Zellen Text bei mouseover austauschen

SELF-Forum

in mehreren Zellen Text bei mouseover austauschen

Michael Homepage des Autors
– Informationen zu den Bewertungsregeln

Guten Abend!
Ich habe ein Problem mit Javascript (mit dem ich mich zugegebenermassen schlecht auskenne).

Für ein Projekt an der Uni sollen 4Personen Fragen gestellt werden.
Diese Fragen werden in eine Tabelle eingetragen.
Auf der gleichen html-Seite sind die Namen der 4Personen. Überfährt man den Namen einer Person, sollen die Fragen in der Tabelle durch die Antworten der Person ausgetauscht werden. Insgesammt werden es 12 Fragen, um es übersichtlicher zu machen, habe ich erstmal mit 3Fragen angefangen.

Der "code" den ich habe funktioniert, allerdings bin ich mit der Optik nicht zufrieden, weis aber nicht, wie ich es ändern kann.
Ich möchte, dass die Fragen und Antworten in ein und der selben Zeile einer jeden Zelle erscheinen. Im Moment benötigt jede Frage und jede Antwort noch eine Zeile.

hier ist der code:

<html>
<head>
<script type="text/javascript">

function member1 () {
  if (document.getElementById)
   document.getElementById("o1").style.visibility = "hidden";
document.getElementById("o2").style.visibility = "hidden";
document.getElementById("o3").style.visibility = "hidden";
    document.getElementById("1m1").style.visibility = "visible";
document.getElementById("2m1").style.visibility = "visible";
document.getElementById("3m1").style.visibility = "visible";
}
function member1out () {
  if (document.getElementById)
   document.getElementById("o1").style.visibility = "visible";
document.getElementById("o2").style.visibility = "visible";
document.getElementById("o3").style.visibility = "visible";
    document.getElementById("1m1").style.visibility = "hidden";
document.getElementById("2m1").style.visibility = "hidden";
document.getElementById("3m1").style.visibility = "hidden";
}

function member2 () {
  if (document.getElementById)
   document.getElementById("o1").style.visibility = "hidden";
document.getElementById("o2").style.visibility = "hidden";
document.getElementById("o3").style.visibility = "hidden";
    document.getElementById("1m2").style.visibility = "visible";
document.getElementById("2m2").style.visibility = "visible";
document.getElementById("3m2").style.visibility = "visible";
}
function member2out () {
  if (document.getElementById)
   document.getElementById("o1").style.visibility = "visible";
document.getElementById("o2").style.visibility = "visible";
document.getElementById("o3").style.visibility = "visible";
    document.getElementById("1m2").style.visibility = "hidden";
document.getElementById("2m2").style.visibility = "hidden";
document.getElementById("3m2").style.visibility = "hidden";
}

function member3 () {
  if (document.getElementById)
   document.getElementById("o1").style.visibility = "hidden";
document.getElementById("o2").style.visibility = "hidden";
document.getElementById("o3").style.visibility = "hidden";
    document.getElementById("1m3").style.visibility = "visible";
document.getElementById("2m3").style.visibility = "visible";
document.getElementById("3m3").style.visibility = "visible";
}
function member3out () {
  if (document.getElementById)
   document.getElementById("o1").style.visibility = "visible";
document.getElementById("o2").style.visibility = "visible";
document.getElementById("o3").style.visibility = "visible";
    document.getElementById("1m3").style.visibility = "hidden";
document.getElementById("2m3").style.visibility = "hidden";
document.getElementById("3m3").style.visibility = "hidden";
}

function member4 () {
  if (document.getElementById)
   document.getElementById("o1").style.visibility = "hidden";
document.getElementById("o2").style.visibility = "hidden";
document.getElementById("o3").style.visibility = "hidden";
    document.getElementById("1m4").style.visibility = "visible";
document.getElementById("2m4").style.visibility = "visible";
document.getElementById("3m4").style.visibility = "visible";
}
function member4out () {
  if (document.getElementById)
   document.getElementById("o1").style.visibility = "visible";
document.getElementById("o2").style.visibility = "visible";
document.getElementById("o3").style.visibility = "visible";
    document.getElementById("1m4").style.visibility = "hidden";
document.getElementById("2m4").style.visibility = "hidden";
document.getElementById("3m4").style.visibility = "hidden";
}
</script>
</head>
<body>
<h3>
bei mouseover mehrer inhalte austauschen,<br>
bei mouseout zur&uuml;ck zum original
</h3>
<table width="180" border="1" cellspacing="0" cellpadding="5">
<tr>
<td>
<div id="o1" style="visibility:visible">frage1</div>
<div id="1m1" style="visibility:hidden">antwort 1 member1</div>
<div id="1m2" style="visibility:hidden">antwort 1 member2</div>
<div id="1m3" style="visibility:hidden">antwort 1 member3</div>
<div id="1m4" style="visibility:hidden">antwort 1 member4</div>
</td>
</tr>
<tr>
<td>
<div id="o2" style="visibility:visible">frage2</div>
<div id="2m1" style="visibility:hidden">antwort 2 member1</div>
<div id="2m2" style="visibility:hidden">antwort 2 member2</div>
<div id="2m3" style="visibility:hidden">antwort 2 member3</div>
<div id="2m4" style="visibility:hidden">antwort 2 member4</div>
</td>
</tr>
<tr>
<td>
<div id="o3" style="visibility:visible">frage3</div>
<div id="3m1" style="visibility:hidden">antwort 3 member1</div>
<div id="3m2" style="visibility:hidden">antwort 3 member2</div>
<div id="3m3" style="visibility:hidden">antwort 3 member3</div>
<div id="3m4" style="visibility:hidden">antwort 3 member4</div>
</td>
</tr>
</table>
<br>
W&auml;hlen sie ein Mitglied, um dessen Antworten zu sehen.<br>
<a onMouseOver="javascript:member1()" onMouseOut="javascript:member1out()">member1</a><br>
<a onMouseOver="javascript:member2()" onMouseOut="javascript:member2out()">member2</a><br>
<a onMouseOver="javascript:member3()" onMouseOut="javascript:member3out()">member3</a><br>
<a onMouseOver="javascript:member4()" onMouseOut="javascript:member4out()">member4</a><br>
</body>
</html>

Anzusehen ist er hier:
http://www.datakitchen.michamo.de/data/test.htm

Vielen Dank für jede Hilfe,

Michael

PS:
Ich hab es erstmal bei Javascript eingeordnet, aber evtl. gibt es ja auch ne CSS Lösung ...

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. in mehreren Zellen Text bei mouseover austauschen

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    document.getElementById("1m1").style.visibility = "visible";

    1m1 ist kein gültiger id-Wert.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. in mehreren Zellen Text bei mouseover austauschen

      Michael
      – Informationen zu den Bewertungsregeln

      Hi,

      document.getElementById("1m1").style.visibility = "visible";

      1m1 ist kein gültiger id-Wert.

      cu,
      Andreas

      Die id muss immer mit einem Buchstaben anfangen?
      Wie gesagt, kenn mich damit leider nicht so gut aus, hab vor jede id noch ein "id" gesetz, aber da liegt ja auch nicht mein Problem ;) Trotzdem danke für den Hinweis!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. in mehreren Zellen Text bei mouseover austauschen

    Bevan
    – Informationen zu den Bewertungsregeln

    Hallo!

    Die Lösung für dein Anliegen ist die CSS-Eigenschaft display (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display).
    Im Gegensatz zur visibility wird bei dieser Eigenschaft nämlich kein Platz freigehalten.

    Dementsprechend musst du deinen code ändern.

    Michael

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. in mehreren Zellen Text bei mouseover austauschen

      Michael
      – Informationen zu den Bewertungsregeln

      Hallo!

      Die Lösung für dein Anliegen ist die CSS-Eigenschaft display (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display).
      Im Gegensatz zur visibility wird bei dieser Eigenschaft nämlich kein Platz freigehalten.

      Dementsprechend musst du deinen code ändern.

      Michael

      Super vielen Dank, es geht :)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. in mehreren Zellen Text bei mouseover austauschen

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Michael,

    Ich möchte, dass die Fragen und Antworten in ein und der selben Zeile einer jeden Zelle erscheinen. Im Moment benötigt jede Frage und jede Antwort noch eine Zeile.

    Ich hab es erstmal bei Javascript eingeordnet, aber evtl. gibt es ja auch ne CSS Lösung ...

    An eine CSS-Lösung glaube ich in diesem Fall bei keinem Browser, JS ist da wohl der richtige Ansatz. Statt mit der Visibility-Eigenschaft würde ich aber an deiner Stelle eher mit display arbeiten, damit die mit "none" ausgeblendeten Elemente keinen Platz wegnehmen  oder den Text in der Tabellenzelle je nach "überfahrenem" Mitglied in der Frage-Antwort-Zelle per innerHTML austauschen, dann brauchst darin nicht jeweils vier Kindelemente.

    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  4. in mehreren Zellen Text bei mouseover austauschen

    molily
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. in mehreren Zellen Text bei mouseover austauschen

      Michael
      – Informationen zu den Bewertungsregeln

      Mit CSS kann man viel einfacher Regeln formulieren, welche Elemente in welchen Fällen angezeigt werden sollen ...

      super schick, danke :)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln