✔ image fading

[SilentWarrior]

hi Leute

also bevor ihr jetzt rummeckert: keine Angst, ich habe das Tut von Klon schon gesehen. nur ist es mir ehrlich gesagt etwas zu überladen - für so eine harmlose fade-funktion braucht man doch nicht etliche zeilen code und eine funktion mit 4 parametern. (oder doch?)

hab bei 4websites.de mal ein etwas anderes kürzeres script gefunden. (http://www.4websites.de/tricks/artikel/18) ich versteh's auch einigermassen, nur hat das teil noch einige schönheitsfehler: warum z.b. muss man noch "theobject=which2" angeben? ist which2 nicht direkt verfügbar? das verstehe ich nicht so ganz. und zweitens: es wird keine fadeout-funktion angeboten - das bild flutscht einfach wieder zurück in den anfangszustand.

also ich wäre sehr sehr froh wenn mir jemand den ganzen kram mal von vorne bis hinten durcherklärt - weil ich code nämlich lieber sachen, die zwar etwas weniger umfangreich sind, bei denen ich aber jede einzelne codezeile verstehe.

 

[Adam Wille]

Schöne Sache...

warum z.b. muss man noch "theobject=which2" angeben? ist which2 nicht direkt verfügbar?

Probier's doch aus.
Klappt es denn und wenn nicht, warum denkst du, dass es nicht klappt?

und zweitens: es wird keine fadeout-funktion angeboten - das bild flutscht einfach wieder zurück in den anfangszustand.

Wenn das Intervall einfach zurückgesetzt wird, dann ist das relativ logisch.
Sieht aber nicht so schwer aus, anhand der Funktion highlightit eine entsprechend umgekehrte zu entwerfen, oder?

Starte doch mal einen Versuch, ich bin dabei.

Geist

 

[SilentWarrior]

hm geist... also zum ersten: ich hab's ausprobiert. da geht nix. und ich hab überhaupt keinen blassen schimmer wieso.

zum zweiten: werd mal eine eigene funktion (bzw. mehrere) basteln und dann zur überprüfung hier reinhauen. auf jeden fall danke schon mal für die unterstützung.

//edit. ok also hier mein erster versuch:

function drueber(h)
 {
  i = h;
  if(window.downlightinterval)
    clearInterval(downlightinterval);
  highlightinterval = setInterval("highlight(i)",50)
 }

function raus(j)
 {
  k = j;
  if(window.hightlightinterval)
    clearInterval(highlightinterval);
  downlightinterval = setInterval("downlight(k)",50)
 }

function highlight(l)
 {
  m = l;
  if(m.filters.alpha.opacity<100)
    m.filters.alpha.opacity+=5;
 }

function downlight(n)
 {
  o = n;
  if(o.filters.alpha.opacity>20)
    o.filters.alpha.opacity-=5;
 }
//-->
</script>

und im bild:

... style="filter:alpha(opacity=20);" onMouseOver="drueber(this)" onMouseOut="raus(this)">

sorry für das buchstaben gewirr, aber an dem liegt's nicht.

 

[SilentWarrior]

geeeist, wo bist du?

 

[Adam Wille]

Hier.

Arbeit stresst gerade, sorry.
Ich lad mir alle neuen Antwort-Beiträge grad in den Cache und checke dann offline - denke mal, dass ich nachher noch ne Antwort bringen kann.

Geist

 

[SilentWarrior]

hm... hoi geist

also soll jetzt überhaupt net bös klingen, und ich versteh's ja auch wenn du stress hast. aber dann gib mir doch wenigstens nen termin, wann ich mit deiner ungeteilten aufmerksamkeit rechnen darf. sonst hab ich immer das gefühl du hättest mich vergessen.

 

[Adam Wille]

Okay, klären wir das mal innerhalb dieses Wochenendes.

Zur Sache mit der Zuweisung "theobject=which2", ohne die nix laufen wird:
Lies dir mal die Stelle "Beachten Sie:" in SelfHTML's Abschnitt über window.setTimeout durch und du dürftest wissen warum.

später mehr...

Geist

 

[Adam Wille]

Okay, hier mal ein Vorschlag.

Ist zwar die rekursive Variante über setTimeout(), aber ich versuch', die mit setInterval() morgen folgen zu lassen:

<script type="text/javascript" language="JavaScript">
<!--

function high(theObj) {
    if (theObj.filters.alpha.opacity < 100) {
        theObj.filters.alpha.opacity += 5;
    } else {
        return;
    }
    obj = theObj;
    highlighting = setTimeout("high(obj)", 50);
}

function low(theObj) {
    if (theObj.filters.alpha.opacity > 20) {
        theObj.filters.alpha.opacity -= 5;
    } else {
        delete lowlighting;
        delete obj;
        return;
    }
    obj = theObj;  // in dieser Funktion nicht unbedingt notwendig, wenn nur 1 Button
    lowlighting = setTimeout("low(obj)", 50);
}

//-->
</script>

als Script <head>-Abschnitt des Dokumentes und auf dem Bildobjekt selbst dann wie folgt die Handler implementieren:

<img src="JavaScript Fader Beispiel-Dateien/button.gif" border="0" onMouseOver="high(this);" onMouseOut="clearTimeout(highlighting); low(this);" style="filter:alpha(opacity=20);">

Vielleicht bringt dich das etwas weiter...

hth,
Geist