molily: Fade Effekt mit anschließenden Bildwechsel

Beitrag lesen

Hallo,

Eine Antwort auf deinen anderen Thread, den ich geschlossen habe:

Wie kann ich diese Funktion wieder aktivieren d.h. welches Schlüsselwort muss ich verwenden um this.onmouseout=null wieder rückgängig zu machen?

Da gibts kein Schlüsselwort. Du überschreibst den existierenden Event-Handler, dann issser weg und kommt so einfach nicht wieder. Bessre du löst das anders. Setze z.B. am Element einen Flag, dass der Handler erst einmal nicht aktiv werden soll.

onclick="this.ausgewählt = true; ..."
onmouseout="if (this.ausgewählt) return; ..."

Aber dein Problem ist wohl anderer Natur:

Und wie beziehe ich mich auf alle anderen Links im Skript (this=Bezieht sich auf aktuellen Link gibt es da auch was für alle anderen)?"

Das ist nicht so einfach. Du kannst natürlich alle Links über den document.links-Array durchlaufen, aber was du eigentlich brauchst, ist eine richtige Menü-Logik, die speichert, welcher Eintrag gerade hervorgehoben ist. Ich nehme mal an, dass du auch mehr als zwei Menüpunkte hast - dann würde es unendlich viel Schreibarbeit.

Beser du legst dir zentrale Funktionen für mouseover, click und mouseout an, die jeweils this entgegennehmen:

<ul>  
<li><a href="..."><img src="..." name="irgendwas" onmouseover="menüMouseover(this)" onmouseout="menüMouseout(this)" onclick="menüClick(this)"></a><li>  
...  
</ul>

(Im Übrigen kannst du auf Tabellenlayout verzichten und mit CSS formatieren... das räumt dem Code ziemlich auf.)

Die drei Funktionen dazu (schematisch).  
  
function menüClick (element) {  
   if (window.menüFokus) {  
      menüMouseout(menüFokus); // Lösche die alte Hervorhebung.  
   }  
   menüFokus = element; // Speichere das aktuelle Element in menüFokus.  
}  
  
function menüMouseover (element) {  
   if (window.menüFokus && menüFokus == element) {  
      // Eintrag ist fokussiert, breche ab  
      return;  
   }  
   JSFX.fadeIn(element.name); // Weiß nicht, ob das mit dem JSFX-Script klappt.  
}  
  
function menüMouseout (element) {  
   JSFX.fadeOut(element.name);  
}

Das lässt sich jetzt natürlich noch weiter verbessern, sodass man die Event-Handler nicht mehr ins HTML schreiben muss, sondern sie automatisch vergeben werden. Aber das soll dir nur einen möglichen Aufbau vorstellen.

Mathias