|
|||
getElementsByTag und mouseOver
Hallo,
Ich möchte bei Hover über den farbigen Links die Hintergrundfarbe aller zugehörenden Submenü-Links ändern. Bei dem roten und grünen Link funktioniert es wie gewünscht: Untitled Document Eleganter geht es natürlich mit einer Schleife und einer Funktion, die ich in dem gelben Link anzuwenden versucht habe. Ich bekomme es aber nicht hin. Kann einer von euch bitte helfen? Gruß, Manya |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
Danke für den Tipp. Ich benutze die Fehler-Konsole von Firefox, und die hat nichts angezeigt. Ich habe es jetzt so: Code:
<script type="text/javascript"> function farbe() { var ind = 0; var anzahl_a = document.getElementById("sprache").document.getElementsByTagName("a").length; alert(var anzahl_a); for (var ind = 0; ind < anzahl_a; i++) { document.getElementById("sprache").document.getElementsByTagName("a")[ind].onmouseover = style.backgroundColor='#FFC', document.getElementById("sprache").document.getElementsByTagName("a")[ind].onmouseout = style.backgroundColor='#FFF'; } } </script> Kann da vielleicht nochmal jemand drüberschauen? Gruß, Manya Edit: Hier ist die geänderte Datei http://manya.ma.funpic.de/js-test/ge...tsbytag-1.html Geändert von manya (31.07.2013 um 20:08 Uhr) |
|
||||
Ok, ich versuchs mal, du solltest dir aber unbedingt die Grundlagen zu Javascript aneignen:
alert(var anzahl_a); ist ein Syntaxfehler, dort darf kein var vorkommen. Überhaupt darfst du var nur für die Initialisierung einer lokalen Variable verwenden, also nur bei der ersten Notation, nicht danach. Üblich ist es alle Variablen am Anfang einer Funktion zu Initialisieren, da Javascript nur den Function-Scope kennt. Es muss getElementById heißen, es kann eh immer nur ein Element mit einer ID geben. document ist ein Objekt von window, du kannst darauf nicht durch den Rückgabewert von Funktionen zugreifen (es sei denn sie würden das window-Objekt zurückgeben, was wenig sinnvoll wäre). onmouseover und onmouseout müssen Funktionen zugewiesen werden, diese werden dann ausgeführt sobald das entsprechende Event gefeuert wird. Eigentlich möchtest du diese Events auch gar nicht nutzen, wenn ich deine Beispiele bei den anderen Menüpunkten richtig verstehe, sondern die Farbe sofort ändern (deine Funktion wird ja erst beim Hover-Event ausgeführt). Du bräuchtest dann allerdings noch eine Funktion die du bei onmouseout aufrufst. So könnte der aktuelle Stand aussehen: Code:
function farbe() { var ind; var anzahl_a = document.getElementById("sprache").getElementsByTagName("a").length; alert(anzahl_a); for (ind = 0; ind < anzahl_a; ind++) { document.getElementById("sprache").getElementsByTagName("a")[ind].style.backgroundColor='#FFC'; } } |
|
||||
Dann benutzt du sie falsch, natürlich zeigt die Fehlerkonsole die Fehler an auf deiner Seite an.
Code:
Zeitstempel: 01.08.2013 08:35:19 Fehler: SyntaxError: syntax error Quelldatei: http://manya.ma.funpic.de/js-test/getelementsbytag.html Zeile: 64 Quelltext: var ind = 0; Zeitstempel: 01.08.2013 08:36:10 Fehler: ReferenceError: farbe is not defined Quelldatei: http://manya.ma.funpic.de/js-test/getelementsbytag.html Zeile: 1 |
|
|||||
Zitat:
Zitat:
Zitat:
Zitat:
Das habe ich jetzt: test-7 Zitat:
Ich habe mich bald zu Tode gegoogelt, um passende Schnipsel zu finden. Tausend Dank für deine Erklärung und deinen Beispielcode! Gruß, Manya |
|
|||
Hallo,
Zitat:
Ich bin immer davon ausgegangen, daß sie automatisch funktioniert. Jedenfalls wird bei mir oft eine ewig lange Liste mit Warnungen und Hinweisen angezeigt. Direkt vor dem Aufruf meiner Testdatei habe ich die Liste in der Fehlerkonsole also gelöscht und nachdem die Testseite geladen war, die Fehlerkonsole wieder aufgerufen. Da stand dann nichts mehr drin. |
|
||||
Zitat:
Wenn du die Warnungen ignorieren willst, dann blende sie aus, im Firefox kannst du sehr einfach auswählen was er dir in der Konsole anzeigen soll. Dazu gibt es grosse beschriftete Buttons in dem Fenster. |
Sponsored Links |
|
||||
Zitat:
Zitat:
Zitat:
Code:
function changeColor(subMenuId, color) { var ind; var links = document.getElementById(subMenuId).getElementsByTagName('a'); for (ind = 0; ind < links.length; ind++) { links[ind].style.backgroundColor = color; } } Zum Beispiel: HTML-Code:
<a style="background-color: #0cc;" href="#" onmouseover="changeColor('betriebssysteme', '#0cc')" onmouseout="changeColor('betriebssysteme', '#fff')">Betriebssysteme</a> |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
mouseover hilfe bitte | spyuser | (X)HTML | 4 | 27.02.2013 15:19 |
Jquery Code für Mouseover etwas vereinfachen | connor | Javascript & Ajax | 8 | 07.03.2010 23:01 |
Css mouseover problem | Biomechaniker | CSS | 3 | 16.10.2009 21:33 |
CSS Spry Menu Problem mit Hintergrund bei Mouseover | myron | CSS | 9 | 12.07.2009 13:34 |
li mouseover mit unterschiedlichen größen | temp11 | CSS | 4 | 08.10.2007 16:35 |