Forum
Tipps
News
Menu-Icon

Visible/Hidden

Moin,

Zitat
<html>
<body>
<script language="JavaScript" type="text/javascript">
function submenu(id) {
   var x = document.getElementById("sub1");
   x.style.visibility = "hidden";
   var x = document.getElementById("sub2");
   x.style.visibility = "hidden";
   var x = document.getElementById(id);
   x.style.visibility = "visible";
}
</script>

<div id="topmenumain">
<a href="a" onMouseOver="submenu('sub1');" onClick="submenu('sub1');">1</a>
<a href="b" onMouseOver="submenu('sub2');" onClick="submenu('sub2');">2</a>
</div>

<div id="sub1">
Hallo!
</div>

<div id="sub2">
Tschüss!
</div>
</body>
</html>

Das Problem ist, wenn man die Seite neu lädt, sieht man sowohl "Hallo" als auch "Tschüss".
Wie muss ich den Quelltext ändern, dass man erst Text sieht, sobald man über "a" oder "b" mit der Maus gefahren ist?

Antworten zu Visible/Hidden:

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
<html>
<body>
<script language="JavaScript" type="text/javascript">
function submenu(id) {
   var x = document.getElementById("sub1");
   x.style.visibility = "hidden";
   var x = document.getElementById("sub2");
   x.style.visibility = "hidden";
   var x = document.getElementById(id);
   x.style.visibility = "visible";
}
</script>

<div id="topmenumain">
<a href="a" onMouseOver="submenu('sub1');" onClick="submenu('sub1');">1</a>
<a href="b" onMouseOver="submenu('sub2');" onClick="submenu('sub2');">2</a>
</div>

<div id="sub1" style="visibility:hidden;">
Hallo!
</div>

<div id="sub2" style="visibility:hidden;">
Tschüss!
</div>
</body>
</html>

Meinst du ungefähr so?

Genau so! Vielen Dank  :D

Kleiner Zusatz:
Durch einen neuen <div> - Tag fängt ja eine neue Zeile an.
Wie man auf den Bildern sieht, steht "Text" unter "Schulintern".
WIe kriege ich das auf eine Ebene, also dass "Text" ebenfalls oben steht?

Müsste ich dann alles in ein <div> fassen? Oder wie ist der Javascriptquelltext zu ändern?

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Mit der Style-Eigenschaft "visibility:hidden" blendest du ein Element aus, es nimmt aber weiterhin Platz ein. Wenn du stattdessen in deine JavaScript folgendes schreibst:

x.style.display = "none"; wird das Element komplett ausgeblendet und nimmt auch keinen Platz mehr ein.

Falls das nicht die Lösung zu deinem Problem ist, wäre es nicht verkehrt, wenn du es nochmal etwas genauer erläutern würdest bzw. den echten Quelltext postest.

Also, wenn man mit der Maus über eine Grafik fährt, soll unter der Grafik Text erscheinen, eine Art Untermenü.
Das klappt bei dem ersten Bild, bei dem zweiten steht der Text dann aber unter der Position des Textes von Grafik1.
Wie bekomme ich die Texte auf eine Ebene?
Hier mein Script.
 

Zitat
<script language="JavaScript" type="text/javascript">
function submenu(id) {
var x = document.getElementById("sub1");
x.style.visibility = "hidden";
var x = document.getElementById("sub2");
x.style.visibility = "hidden";
var x = document.getElementById(id);
x.style.visibility = "visible";
}
</script>

<div id="topmenumain">
<a href="a" onMouseOver="submenu('sub1');" onClick="submenu('sub1');">
<img src="grafik1.jpg" border="0"></a>

<a href="b" onMouseOver="submenu('sub2');" onClick="submenu('sub2');">
<img src="grafik2.jpg" border="0"></a>
</div>

<div id="sub1" style="visibility: hidden;">
Text1
</div>
<div id="sub2" style="visibility: hidden; padding-left: 140px;">
Text2
</div>

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Mit der Style-Eigenschaft "visibility:hidden" blendest du ein Element aus, es nimmt aber weiterhin Platz ein. Wenn du stattdessen in deine JavaScript folgendes schreibst: x.style.display = "none"; wird das Element komplett ausgeblendet und nimmt auch keinen Platz mehr ein.

Falls das nicht die Lösung zu deinem Problem ist, wäre es nicht verkehrt, wenn du es nochmal etwas genauer erläutern würdest bzw. den echten Quelltext postest.

Hast du es mit display:none statt visibility:hidden nun probiert oder nicht? Hat es nicht den gewünschten Effekt gebracht?

€dit: um den Div-Block wieder anzuzeigen, musst du dann natürlich statt
x.style.visibility = "visible";
folgendes schreiben:
x.style.display = "block";



(Wenn du später noch normalen Inhalt einfügst, dann wirst du bei der genannten Lösung aber merken, dass dann der Inhalt nach unten verschoben wird, wenn ein Untermenü angezeigt wird. Wenn du das verhindern willst und stattdessen möchtest, dass das Untermenü einfach drübergeklatscht wird, musst du die Untermenüs absolut positionieren und dann wäre es schnuppe, ob du display:none oder visibility:hidden verwendest. Aber das ist ja jetzt erstmal vorweggegriffen und vllt. auch gar nicht das, was du möchtest.)
« Letzte Änderung: 12.04.09, 10:06:49 von mati »

« {link} in xml zerstört File Banner von CH »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Hypertext
Hypertext ( zu Deutsch: Übertext) ein ein von dem Informatiker Theodore L. Nelson in den sechziger Jahren geprägter Begriff für Text, der dreidimensional g...

Textur
Unter einer Textur versteht man eine Oberflächenstrukur, die ein bestimmtes Material simuliert, wie Holz, Tapete oder Metall. Bei der 3D-Computeranimation bezeichnet...

Maus
Eine Computer-Maus, auch Maus oder englisch "Mouse" ist ein PC Eingabegerät, mit dem der Maus-Pfeil, Cursor oder Pointer auf dem PC Bildschirm gesteiert wird. Die Ma...