• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

onMouseOver bei Hidden div

W

Witschi262

Blogger
Hi,
ich hätte gerne ein OnMouseOver bei einem Hidden Div das ich bei Google gefunden habe, wildes einfügen irgendwo von onMouseOver hat leider nicht geklappt.

Beim Überfahren des Links soll der HiddenDiv dann erscheinen

Code: 
<script language="javascript"> function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
</script>
 
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>
 
Werbung:
Du musst doch nur im Link das Attribut onmouseover einfügen und dort toggle() als Funktion eintragen.

HTML: 
<a href="#" onmouseover="toggle();">...
 
Witschi262 schrieb:
Hi,
ich hätte gerne ein OnMouseOver bei einem Hidden Div das ich bei Google gefunden habe, wildes einfügen irgendwo von onMouseOver hat leider nicht geklappt.
Zum Vergrößern anklicken....
Ich hätte gerne, dass sich die Leute noch einmal durchlesen was sie schreiben. Und versuchen, das Geschriebene aus der Perspektive eines Aussenstehenden zu erfassen.

Und eine Frage wäre auch nicht schlecht.
 
Werbung:
Danke für die Antworten.
Klappt ganz gut.

Allerdings habe ich mehrer Boxen, welche mit der WhileSchleife ca. 30 mal ausgelesen werden sollen. Beim überfahren einer Box soll jetzt also bei der Box, beider ich drüber fahre der HiddenDiv erscheinen. Dazu müsste ich doch dann jedem Div einen anderenNamen geben und im Javascript selbst definieren. Da ich aber ja immer eine verschiedene anzahl an divs habe durch die ergebnisse, ist das relativ unpraktisch.
 
Dann pass diese toggle-Funktion so an, dass Du als Parameter an sie die ID des aus-/einzublendenden Objektes übergibst. Dann wäre sie so flexibel, dass Du damit jedes beliebige Element mit einer ID auf der Seite ein- und ausblenden könntest.
 
Ich bin in Javascript ein ziemlicher "Neuling" und taste mich gerade erst heran. Ich vermute es hat etwas mit der Funktion inner.HTML zutun? Ich kenne mich da noch nicht so aus, kannst du mir bitte einen Link zu einem Beispiel bitte schicken?
 
Werbung:
Es hat etwas mit document.getElementById zu tun. Damit kannst eine Referenz auf jedes Objekt im document erstellen und dann in Abhängikeit vom Übergabeparemeter der verallgemeinerten toggle-Funktion jedes gewünschte Div ein/Ausblenden und das mit einer einzigen Funktion.
 
So in etwa

Habe es nicht getestet:

HTML: 
<script language="javascript">    
function toggle(MyId) {    
  var ele = document.getElementById("MyId");    
  var text = document.getElementById("displayText");    
  if(ele.style.display == "block") {            
     ele.style.display = "none";        
     text.innerHTML = "show " + MyId;      
  }    
  else 
 {        
    ele.style.display = "block";        
    text.innerHTML = "hide + MyId";    }
} 
</script>
<span id="displayText">Start</span>
<a href="javascript:toggle('div1');">Div1 steuern</a>
<a href="javascript:toggle('div2');">Div2 steuern</a>
<div id="div1" style=display:none">Hier ist div 1</div>
<div id="div2" style=display:none">Hier ist div 2</div>
 
Zuletzt bearbeitet:
Werbung:
Hallo,
erstmal vielen Dank für die Mühe.

Leider funktioniert das nicht. Und, wenn ich richtig aufgepasst habe, muss ich die ID ja trotzdem noch einzeln in dem jeweiligen Link eintragen, die dann übergeben wird. Kann man nicht die ID übergeben, die der DIV gerade hat, ohne diese einzeln eintragen zu müssen?
 
doch, dann übergib this (das ist eine referenz auf das geklickte element).

<a id='a1' href="javascript:toggle(this);">Div durch a1 steuern</a>

dann kannst in der funktion toggle(sender) { ... } auf sender.id oder sonstige sender-attribute zugreifen. Also nehmen wir an, der anker mit id='ax' soll element mit id='div_ax' steuern, dann wird das zu


var ele = document.getElementById('div_' + sender.id);

Aber irgendwie musst dann über eine Namenskonvention die beiden Elemente verknüpfen oder du speicherst den Namen des anderen elements im rel-Attribut des ankers:

<a rel='mydiv1' href="javascript:toggle(this);">Div durch rel-attribut steuern</a>

var ele = document.getElementById(sender.rel);


 
Zuletzt bearbeitet:
Ich verstehe nicht so ganz, also den ersten Teil beidem ich die Sender Attribute benutze, habe ich verstanden
Habe da folgendes Javascript:
Code: 
<script language="javascript">
function toggle(sender) {
  var ele = document.getElementById('div_' + sender.id);
  var text = document.getElementById("displayText");
  if(ele.style.display == "block") {
     ele.style.display = "none";
     text.innerHTML = "show " + MyId;
  }
  else
 {
    ele.style.display = "block";
    text.innerHTML = "hide + MyId";    }
}
</script>

Aber dann verstehe ich nicht warum ich die Variable ele nurnoch sender.rel zuweisen soll.
 
Werbung:
Es waren 2 verschiedene Vorschläge. ENTWEDER über eine Namenskonvention ODER durch den Wert in rel. Irgendwie musst ja Anker und Div verknüpfen.
 
Achso. Ich habe ja die erste Variante genommen, allerdings habe ich den Anker weggelassen und durch einen weiteren Div ersetzt:

<div id="furniture_info_left" rel='div_l' onmouseover="toggle(this);" onmouseout="toggle(this);">
 
Ging ja nur ums Prinzip. Welchen Elementtyp du letztendlich als Sender und Gesteuerten nimmst ist nur eine Detailfrage.
 
Werbung:
Dann hast noch einen Fehler drin. Schau dir mal meine Homepage an Mühlespiel - Startseite unter Neuigkeiten und klick da auf die Icons. Die rufen alle die gleiche Funktion auf, allerdings mit einem Parameter (integer) statt this. Dann wird wird ein Div eingeblendet, dessen Id sich aus dem Parameter ergibt.
 
Ich poste hier das ganze relevante einfach mal.

Code: 
<script language="javascript">
function toggle(sender) {
  var ele = document.getElementById('div_' + sender.id);
  var text = document.getElementById("displayText");
  if(ele.style.display == "block") {
     ele.style.display = "none";
     text.innerHTML = "show " + MyId;
  }
  else
 {
    ele.style.display = "block";
    text.innerHTML = "hide + MyId";    }
}
</script>
<div id="furniture_info_left" rel='div_l' onmouseover="toggle(this);" onmouseout="toggle(this);">
        <div id="div_1" style="display: none;background-image: url(images/hover_white.png);background-repeat:no-repeat;width:195px;height:40px;">peek-a-boo</div>
        <center><img src="images/furni/menorah.png" style="margin-top:10px;"></center>


       </div>
 
Werbung:
gib doch mal alert('div_' + sender.id); aus und schau, ob es da ist, was du erwartest. Sorry, aber das sind Grundlagen der Fehleranalyse, und ich habe es oben im Beipsiel schon gesagt, dass wenn der Sender id="ax" hat, dass dann das gesteuerte Element div_ax heißen muss. In deinem Fall also div_furniture_info_left. Das rel gibt es bei div nicht, ich zieh mich hier nun zurück, weil ich meine, du solltest erst mal etwas mehr Sicherheit und Basiswissen in JavaScript anlesen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben