Fade Effekt mit anschließenden Bildwechsel

[McStone]

Hallo Leute,

ich habe folgendes Script:
-------------------------------------------------------------------

<!-- /// Buttonsfading START -->

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" src="JSFX_FadingRollovers.js">
 </SCRIPT>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
 <!--
 JSFX.Rollover("beispiel", "img/beispiel_active.gif");
         //-->
 </SCRIPT>

<!-- /// Buttonfading END --->

<table height="150" width="800" cellpadding="0" cellspacing="0" border="0">
<tr>
 <td valign="top" width="80" height="40" background="img/beispiel_normal.gif">
 <a href="../pfad/beispiel.html" target="main"
  onMouseOver="JSFX.fadeIn('beispiel')"
  onMouseOut="JSFX.fadeOut('beispiel')"><img src="img/dressur_normal.gif" width="80" height="40" name="beispiel" border="0" alt="Beispiel" class="imgFader">
  </a> </td>
</tr>
</table>

-------------------------------------------------------------------

Der Fade-Effekt funktioniert soweit, allerdings soll das aufgerufene Bild "onClick" stehen bleiben und erst nach Aktivierung "onClick" einer anderen Seite wieder ausfaden.

Hat jemand eine Idee wie ich das in diesem oder einem ähnlichen Script umsetzen kann?

Vielen Dank im vorraus
McStone

[EKKi]

Mahlzeit,

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" src="JSFX_FadingRollovers.js">
</SCRIPT>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
JSFX.Rollover("beispiel", "img/beispiel_active.gif");
         //-->
</SCRIPT>

Grundsätzliche Empfehlungen:

1. Schreibe HTML-Tags entweder IMMER groß oder IMMER klein (wobei ich letzteres empfehlen würde) - sonst wird's schnell unübersichtlich.

2. Das "language"-Attribut kannst Du weglassen - es ist veraltet.

3. Javascript-Code mit HTML-Kommentaren auszublenden war im letzten Jahrtausend sinnvoll, weil teilweise nötig. Heutzutage nicht mehr.

Anschließend noch eine Anmerkung:

Was Du uns hier zeigst, ist lediglich der Aufruf einer vermutlich in der Datei "JSFX_FadingRollovers.js" definierten Funktion. Wenn Du uns schon nicht den Quellcode zeigst, könntest Du dann beim nächsten Mal einfach eine funktionierende Glaskugel beilegen?

<table height="150" width="800" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="80" height="40" background="img/beispiel_normal.gif">
<a href="../pfad/beispiel.html" target="main"
  onMouseOver="JSFX.fadeIn('beispiel')"
  onMouseOut="JSFX.fadeOut('beispiel')"><img src="img/dressur_normal.gif" width="80" height="40" name="beispiel" border="0" alt="Beispiel" class="imgFader">
  </a> </td>
</tr>
</table>

[...]

Der Fade-Effekt funktioniert soweit, allerdings soll das aufgerufene Bild "onClick" stehen bleiben und erst nach Aktivierung "onClick" einer anderen Seite wieder ausfaden.

Welches Bild (ich sehe da kein <img>-Tag ... oder meinst Du das Hintergrundbild)? "onclick" auf was bzw. welches Element? Was meinst Du mit "stehen bleiben"? Was verstehst Du unter "Aktivierung "onClick" einer anderen Seite"?

Kleiner Tipp: wenn Du Fragen so stellst, dass man Dich auch verstehen kann, kann man Dir auch helfen.

Hat jemand eine Idee wie ich das in diesem oder einem ähnlichen Script umsetzen kann?

Nein. Zumindest nicht, solange Du uns das eigentliche Javascript vorenthältst.

MfG,
EKKi

[Cybaer]

Hi,

1. Schreibe HTML-Tags entweder IMMER groß oder IMMER klein (wobei ich letzteres empfehlen würde) - sonst wird's schnell unübersichtlich.

Wobei Tags/Attribute in Kleinschrift konkret noch den Vorteil haben, den Quellcode leichter nach XHTML wandeln zu können.

3. Javascript-Code mit HTML-Kommentaren auszublenden war im letzten Jahrtausend sinnvoll, weil teilweise nötig. Heutzutage nicht mehr.

OK, Du hast bestimmt einen vollständigen Überblick, was heutzutage irgendwo auf der Welt an Browsern und sonstigen Clients genutzt wird. Der fehlt mir halt, bzw. ich traue mir keine Mutmaßungen zu.

Aber ich bin z.B. immer froh, wenn ich nach einem strip_tags() in PHP nur noch den wirklichen Content übrig habe, ohne CSS-, Script-Code und sonstigem auskommentierten Gesumms, der nicht interessiert.

Gruß, Cybaer

[EKKi]

Mahlzeit,

3. Javascript-Code mit HTML-Kommentaren auszublenden war im letzten Jahrtausend sinnvoll, weil teilweise nötig. Heutzutage nicht mehr.

OK, Du hast bestimmt einen vollständigen Überblick, was heutzutage irgendwo auf der Welt an Browsern und sonstigen Clients genutzt wird. Der fehlt mir halt, bzw. ich traue mir keine Mutmaßungen zu.

Nö, hab ich nicht. Aber streng genommen sollte zwischen <script></script>-Tags einzig und allein Skriptcode des angegebenen Typs stehen - jedenfalls keine HTML-Anweisungen.

Aber ich bin z.B. immer froh, wenn ich nach einem strip_tags() in PHP nur noch den wirklichen Content übrig habe, ohne CSS-, Script-Code und sonstigem auskommentierten Gesumms, der nicht interessiert.

Dafür lagert man Javascript-Code ja sinnvollerweise in separate Dateien aus. :-)

MfG,
EKKi

[Cybaer]

Hi,

Nö, hab ich nicht. Aber streng genommen sollte zwischen <script></script>-Tags einzig und allein Skriptcode des angegebenen Typs stehen - jedenfalls keine HTML-Anweisungen.

? Tut es ja auch nicht. "<!--" bei SCRIPT bzw. "<!--" & "-->" bei STYLE sind allerdings nicht nur explizit erlaubt, sondern sind zwingend notwendig für alle Clients (Clients!=Browser), die Quelltexte nicht soweit parsen (und eigentlich auch nicht parsen müssen), um Content von sonstigem Code unterscheiden zu können.

Das waren früher alle Browser, heute sind es eher sonstige Clients oder auch die prinzipiell sichtbar strikte Trennung von Content & Code, ohne zusätzliche Sonderregeln (SCRIPT enhält keinen Content, STYLE enthält keinen Content) beachten zu müssen (zumal wenn man eh nicht weiß, ob der Client, auf den man eh keinen Einfluß hat, dies tut).

Dafür lagert man Javascript-Code ja sinnvollerweise in separate Dateien aus. :-)

Ja, dann hat sich das Auskommentieren definitiv erübrigt. ;)

Gruß, Cybaer

[Cybaer]

Hi,

Der Fade-Effekt funktioniert soweit, allerdings soll das aufgerufene Bild "onClick" stehen bleiben und erst nach Aktivierung "onClick" einer anderen Seite wieder ausfaden.

? MouseOver -> einfaden, Click -> stehen lassen/Kein Click -> MouseOut ausblenden?

Click bei einer anderen Seite?

Ziemlich unkonkret alles.

Prinzipiell kann man Eventhandler mit HS installieren oder löschen:

<... onMouseOver="JSFX.fadeIn('beispiel')" onClick="function() { this.onmouseout=null; }" onMouseOut="JSFX.fadeOut('beispiel')">

Gruß, Cybaer

[molily]

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

[McStone]

Hi Leute ich habe das Script nun soweit, allerdings ist ein neues Problem aufgetaucht:

----------------------------  hier das Script --------------------------------

<html>
<head>
<title>test</title>
<meta name="author" content="Besitzer">

<!-- /// Buttonsfading START -->

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" src="JSFX_FadingRollovers.js">
 </SCRIPT>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
 <!--
 JSFX.Rollover("dressur", "img/dressur_active.gif");
 JSFX.Rollover("springen", "img/springen_active.gif");
         //-->
 </SCRIPT>

<!-- /// Buttonfading END --->

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<table>
<tr>
 <td background="img/dressur_normal.gif">
 <a href="../pferde/dressur/dressur.html" target="main"
  onMouseOver="JSFX.fadeIn('dressur')"
                 onClick="this.onmouseout=null;JSFX.fadeOut('springen')"
                 onMouseOut="JSFX.fadeOut('dressur')"><img src="img/dressur_normal.gif" width="80" height="40" name="dressur" border="0" alt="Dressur" class="imgFader">
                 </a> </td>

<td background="img/springen_normal.gif">
  <a href="../pferde/springen/springen.html" target="main"
  onMouseOver="JSFX.fadeIn('springen')"
  onClick="this.onmouseout=null;JSFX.fadeOut('dressur')"
                 onMouseOut="JSFX.fadeOut('springen')"><img src="img/springen_normal.gif" width="80" height="40" name="springen" border="0" alt="Springen" class="imgFader">
  </a> </td>
</tr>
</table>

</body>
</html>

----------------------------------------------------------------------------

Folgende Funktion läuft ab ... Ich fahre mit der Maus über einen dieser Links, dann gibt es einen FadeEffekt, der auch wieder verschwindet, wenn ich mit der Maus den Button verlassen. Wenn ich jedoch den Button anklicke bleibt das eingefadete Bild (so wie es sein soll), allerings ist die onMouseOut-Funktion nun komplett deaktiviert.

Nun meine Frage: "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? 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)?"

Hoffe jemand kann mir damit bei meinen Problem helfen