ein Mouseover, mehrere li ändern

[julimueller]

Hallo,
ich forsche jetzt die ganze zeit im internet nach einer lösung, doch bis jetzt habe ich noch keine gefunden.

Ich habe hier einen navigationsbereich, den ich mit zwei reihen aus je 4 li habe.
nun möchte ich, wenn ich mouseover über eine li mache, dass sich der hintergrund beide ul ändert:

  
<ul id="Navigation">  
    <li><a href="Urheber_und_Datenschutz.html"  
           onmouseover="neueFarbe('#ffff00','Navigation'); "  
           onmouseout="neueFarbe('#696969','Navigation1'); ">  
           Urheber und Datenschutz</a>  
    </li>  
    <li><a href="Bedeutung_&_Gefahren_des_Internets.html"  
           onmouseover="neueFarbe('#ff7700','Navigation'); "  
           onmouseout="neueFarbe('#696969','Navigation'); ">  
           Bedeutung & Gefahren des Internets</a>  
    </li>  
    <li><a href="Protokolle_&_Dienste_des_Internets.html"  
           onmouseover="neueFarbe('#ff0000','Navigation'); "  
           onmouseout="neueFarbe('#696969','Navigation'); ">  
           Protokolle & Dienste des Internets</a>  
    </li>  
    <li><a href="Sprachen_des_Internets.html"  
           onmouseover="neueFarbe('#ff00ff','Navigation'); "  
           onmouseout="neueFarbe('#696969','Navigation'); ">  
           Sprachen des Internets</a>  
    </li>  
  </ul>  
  
  <ul name="Navigation">  
    <li><a href="Komponenten_des_Internets.html"  
           onmouseover="neueFarbe('#7700ff','Navigation'); "  
           onmouseout="neueFarbe('#696969','Navigation'); ">  
           Komponenten des Internets</a>  
    </li>  
    <li><a href="Funktionsweise_von_Suchmaschinen.html"  
           onmouseover="neueFarbe('#0000ff','Navigation'); "  
           onmouseout="neueFarbe('#696969','Navigation'); ">  
           Funktionsweise von Suchmaschinen</a>  
    </li>  
    <li><a href="Netzwerke.html"  
           onmouseover="neueFarbe('#00ffff','Navigation'); "  
           onmouseout="neueFarbe('#696969','Navigation'); ">  
           Netzwerke</a>  
    </li>  
    <li><a href="Sicherheit_des_Internets.html"  
           onmouseover="neueFarbe('#00ff00','Navigation'); "  
           onmouseout="neueFarbe('#696969','Navigation'); ">  
           Sicherheit des Internets</a>  
    </li>  
  </ul>  

..ich muss zwei reihen ( zwei ul) machen, weil ich jede reihe horizontal laufen habe, und alle in einer Reihe zu lang wären..

nun habe ich in meiner java datei folgendes:

  
function neueFarbe(Farbe,ID)  
  { document.getElementByID(ID).style.backgroundColor = Farbe ;}  

ich habe nun nur das Problem, dass wenn ich über eins der li gehe, sich nur die bg von der ersten ul ändert, jedoch will ich, dass sich beide ändern, egal über welches li ich hovere..

bitte um hilfe

mfg julimueller

[Beat]

Mache nur eine Liste
floate die li Elemente und wende an der richtigen Stelle clear:left an.

#nav li {float:left}
#nav li:nth-child(5){clear:left:}
#nav:hover{ /* what jou want */}

wende css ul:hover() an statt obsoletes JS zu verwenden.

mfg Beat

[Matthias Apsel]

Om nah hoo pez nyeetz, julimueller!

..ich muss zwei reihen ( zwei ul) machen, weil ich jede reihe horizontal laufen habe, und alle in einer Reihe zu lang wären..

Es ist _eine_ Liste, nur die Darstellung soll zweireihig sein. Nutze z.B. die pseudoklasse nth-child. Gib den Listenelementen passende Breiten oder experimentiere mit float bzw. display: inline-block.

nun habe ich in meiner java datei folgendes:

Java-JavaScript (html5-Dokument, nicht in allen Browsern ordentlich dargestellt)

Ich bin sicher, es gibt eine Lösung ohne Javascript, zeig uns ein Online-Beispiel und male ein Bild dazu.

Matthias

[gast42]

du kannst

onmouseover="neueFarbe('#00ff00','Navigation'); "

ersetzen durch einen Aufruf

onmouseover="neueFarbe('#00ff00','Navigation');neueFarbe('#00ff00','Navigation1'); "

oder die Funktion umbauen, dass sie beides tut (spart jede Menge Quelltext ein), oder einfach den Klassennamen eines umgebenden Elements ändern, so dass es sich auf beide Listen auswirkt.

[Gunnar Bittersmann]

@@gast42:

nuqneH

Warum zeigst du eine schlechte JavaScript-Lösung, wo doch schon in der ersten Antwort von Beat gesagt wurde, dass überhaupt kein JavaScript erforderlich ist?

Qapla'

[julimueller]

ich habe einfach keine 2 ul gemacht, sondern einfach nach vier li ein br :D
sieht genauso aus, nur klappts auch mit farbwechsel und allem
trotzdem danke

[Gunnar Bittersmann]

@@julimueller:

nuqneH

ich habe einfach keine 2 ul gemacht, sondern einfach nach vier li ein br :D

Falsch. 'ul' darf nur 'li' als Kindelemente enthalten, nicht 'br'.

Qapla'

[Fraenk]

Hallo,

mal abgesehen von den besseren Lösungsmöglichkeiten....

<ul id="Navigation">
    <li><a href="Urheber_und_Datenschutz.html"

...

<ul name="Navigation">
    <li><a href="Komponenten_des_Internets.html"

function neueFarbe(Farbe,ID)
  { document.getElementByID(ID).style.backgroundColor = Farbe ;}

getElementByID spricht ein Element an mit genau dieser ID. Deine zweites UL hat aber keine ID! Möglichkeit: gib beiden den Namen name="Navigation" und benutze http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name@title=getElementsByName

VG

[Gunnar Bittersmann]

@@Fraenk:

nuqneH

Möglichkeit: gib beiden den Namen name="Navigation" und benutze http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name@title=getElementsByName

Nein, die Möglichkeit ist keine. 'ul' dürfen kein @name-Attribut haben.

Qapla'

[Fraenk]

http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name@title=getElementsByName

Nein, die Möglichkeit ist keine. 'ul' dürfen kein @name-Attribut haben.

Aha! Weißt Du zufällig, was an einem name-Attribut für eine Liste so böse wäre?

VG

[Gunnar Bittersmann]

@@Fraenk:

nuqneH

Aha! Weißt Du zufällig, was an einem name-Attribut für eine Liste so böse wäre?

Da bei 'ul' kein @name vorkommen darf, hat die JavaScript-Engine auch keine Veranlassung, auch ein fälschlicherweise vorhandenes zu reagieren.

Manche Browser (Fx, Opera, Chrome) tun es dennoch (möglich, dass HTML5 das so vorschreibt). IE tut es aber nicht.

Qapla'

[Fraenk]

Da bei 'ul' kein @name vorkommen darf, hat die JavaScript-Engine auch keine Veranlassung, auch ein fälschlicherweise vorhandenes zu reagieren.

Danke für Deine Antwort! Aber ich hätte gerne gewusst, warum es verboten ist. Also der Sinn des Verbots. Was wäre denn so schlimm, wenn man ein ul über den Namen selektiert um etwas mit ihm 'anzustellen'?

VG

[Matthias Apsel]

Om nah hoo pez nyeetz, Fraenk!

Aber ich hätte gerne gewusst, warum es verboten ist. Also der Sinn des Verbots.

Erklärungsversuch:
@name ist für Elemente gedacht, mit denen man als User interagieren kann, Als da wären

* a als Anker
* map
* (i)frame
* applet/object
* form
  * button
  * input
  * textarea
  * select

Also wurde in die DTD auch nur für solche Elemente ein @name-Attribut aufgenommen.

Was wäre denn so schlimm, wenn man ein ul über den Namen selektiert um etwas mit ihm 'anzustellen'?

nichts, die DTD sieht es nicht vor, schreib dir deine eigene ;-)

Matthias

[Fraenk]

Hallo,

Was wäre denn so schlimm, wenn man ein ul über den Namen selektiert um etwas mit ihm 'anzustellen'?

nichts, die DTD sieht es nicht vor, schreib dir deine eigene ;-)

dann bin ich doch sehr dafür, dass alle Element ein Recht auf einen Namen haben! Sind ja auch nur Menschen...

VG

[Beat]

getElementByID spricht ein Element an mit genau dieser ID.

Primär spricht sie die Fehlerkonsole an!

mfg Beat

[Fraenk]

getElementByID spricht ein Element an mit genau dieser ID.

Primär spricht sie die Fehlerkonsole an!

getElementById, so viel Zeit muss sein, da hast Du recht! :-)