nicht angemeldet
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ü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ä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 ...
MudGuard
Gernot Back