✔ Hidden Text

Steusi

Steusi

Nasenbär
Ich möchte gern Text an verschiedenen Stellen auf meiner Seite per Mouseover sichtbar machen. Hat einer einen Tipp?
So weit bin ich bis jetzt:

Code: 
<html>
<head>
<script language="javascript">
<!--
function Aktivieren()
{
    document.getElementById('EingeblendeterBereich').style.visibility = "visible";
}

function Deaktivieren()
{
    document.getElementById('EingeblendeterBereich').style.visibility = "hidden";
}
//-->
</script>
</head>
<body>
<a href="#" OnMouseOver="Aktivieren();">Aktivieren</a>
<div id="EingeblendeterBereich" style="visibility:hidden;">
Zeile 1<br>
Zeile 2<br>
Zeile 3
</div>
<a href="#" OnMouseOver="Deaktivieren();">Deaktivieren</a>
</body>
</html>
Alles schön und gut, aber der Bereich wird durch seine id aufgerufen. Zweimal die gleiche id geht nicht, oder zumindest wird nur die erste ausgeführt. Ich habe aber Text zwischen den Bereichen, wie kann ich es trotzdem bewerkstelligen?
getElementById muss man bestimmt ändern, aber id durch name zu ersätzen funktioniert nicht.
Ich glaube man kann auch Bereiche mit CSS unsichtbar/sichtbar machen, nur als Tipp falls es damit geht.
:rolleyes:
 
Steusi hat gesagt.:
Ich glaube man kann auch Bereiche mit CSS unsichtbar/sichtbar machen, nur als Tipp falls es damit geht.
Zum Vergrößern anklicken....

Das machst du auch bereits via Javascript :)

document.getElementById('EingeblendeterBereich').style.visibility = "hidden";
Zum Vergrößern anklicken....

Das einzige was ich mir noch vorstellen könnte, wäre dass du die Eigenschaft 'display' meinst. Damit "versteckst" du das div-Element nicht nur, sondern lässt es aus der DOM-Sichtweise auch garnicht erst darstellen.

Das würde dann so gehen:

Code: 
document.getElementById('EingeblendeterBereich').style.display = "none";

bzw um es wieder anzeigen zu lassen:

Code: 
document.getElementById('EingeblendeterBereich').style.display = "block";

Vielleicht hat dir das schon geholfen. Ansonsten würde ich dich bitten dein Problem etwas genauer zu beschreiben.

Stephan
 
Hallo Steusi,
wenn ich dich richtig verstanden habe, dann hast du mehrere Bereiche im Dokument, die du mit dem Script verschwinden bzw. sichtbar machen willst. Dann kannst du natürlich die getElementById-Methode nicht verwenden, da die ID nur einmal vergeben werden kann. Du könntest aber diesen Bereichen einen gemeinsamen Klassennamen geben und dann im Script danach selektieren:
HTML: 
<html>
<head>

<script language="javascript">
<!--
function Sichtbarkeit(einaus) {
  divObj = document.getElementsByTagName('div');
  for (i=0;i<divObj.length;i++) {
    if (divObj[i].className = "eingeblendeterBereich")
      einaus == "ein" ? divObj[i].style.visibility="visible" : divObj[i].style.visibility="hidden"
  }
}
//-->
</script>

</head>
<body>

<a href="#" onmouseover="Sichtbarkeit('ein');">Aktivieren</a>

<div class="eingeblendeterBereich" style="visibility:hidden;">
    Zeile 1<br>
    Zeile 2<br>
    Zeile 3
</div>

<a href="#" onmouseover="Sichtbarkeit('aus');">Deaktivieren</a>

<div class="eingeblendeterBereich" style="visibility:hidden;">
    Zeile 1<br>
    Zeile 2<br>
    Zeile 3
</div>

</body>
</html>
Wichtig: Das Script greift auf alle DIV-Elemente mit den Klassennamen
"eingeblendeterBereich" zu. Falls du noch andere HTML-Elemente einbeziehen willst, dann müsstest du das im Script nach gleichem Muster hinzufügen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück