Bildwechsel statt .filter alpha(opacity)

[maggie2]

Hallo,
ich habe mal versucht, mit meinen dürftigen Kenntnissen, die 'showImage' Funktion mit dem

style.filter = 'alpha(opacity=30)';

dieser Slideshow (Laufband) umzuwandeln, um ein Wechsel vom 'Schwarz-Weiss-Bild' zum 'Farbbild' zu erreichen.
Code:

function showImage()
  {
    if(activeImage){
      activeImage.document.a.src ="images/schwarzweiss.jpg";  
   }
    this.document.a.src ="images/farb.jpg";
    activeImage = this;
  }

Im HTML habe ich die Bilder mit 'name' versehen.

<a href="pfadzurdatei.html" target="_top"><img src="images/schwarzweiss.gif" name="a" title=""border="0"></a>
<a href="pfadzurdatei.html" target="_top"><img src="images/schwarzweiss.gif" name="a" title=""border="0"></a>

So war der Code mit Transparenz-Filter:

function showImage()
  {
    if(activeImage){
      activeImage.style.filter = 'alpha(opacity=20)';
      activeImage.style.opacity = 0.2;
    }
    this.style.filter = 'alpha(opacity=100)';
    this.style.opacity = 1;
    activeImage = this;
  }

Was ist grundsätzlich falsch?
Danke für Hilfe.
Gruß
Maggie

[wahsaga]

Was ist grundsätzlich falsch?

Deine Problembeschreibung - weil sie gar kein Problem beschreibt.
(Und nein, wenn du jetzt ein "funzt nich" nachschiebst, wird sie dadurch auch nicht besser.)


Was als erstes auffällt ist dass der Zugriff auf die Bilder so nicht funktionieren dürfte. Wenn du mehrere Elemente mit dem gleichen Namen versiehst, dann musst du anschliessend einen Index verwenden, um einzelne Elemente anzusprechen, wenn der Zugriff über den Namen erfolgen soll.

[mmnet]

Deine Problembeschreibung - weil sie gar kein Problem beschreibt.
(Und nein, wenn du jetzt ein "funzt nich" nachschiebst, wird sie dadurch auch nicht besser.)


Was als erstes auffällt ist dass der Zugriff auf die Bilder so nicht funktionieren dürfte. Wenn du mehrere Elemente mit dem gleichen Namen versiehst, dann musst du anschliessend einen Index verwenden, um einzelne Elemente anzusprechen, wenn der Zugriff über den Namen erfolgen soll.

Hallo wahsaga!
Die Funktion 'showImage' soll 'onmousemove' das 'activeImage' mit dem 'name' a in das Bild b wechseln.
'onmouseout' soll es wieder auf Bild a springen.

Dass ich beide Bilder mit dem Namen 'a' versehen habe, geht natürlich nicht das schwarzweiss Bild hat nun den 'name' a und das farbe.jpg ist 'b'

Die Funktion 'showImage' müsste nun (meiner Meinung nach) den Bildwechsel wie gewünscht ausführen. Tut sie aber nicht!

Meine Frage: Was ist an der Funktion falsch?

function showImage()
  {
    if(activeImage){
      activeImage.document.a.src ="images/schwarzweiss.jpg";  
   }
    this.document.b.src ="images/farbe.jpg";
    activeImage = this;
  }

Ich hoffe, ich konnte mein Problem verdeutlichen.
Danke für Hilfe.
Maggie

[wahsaga]

Was hat der Blick in die JS-Fehlerkonsole deines Testbrowsers ergeben,
was haben deine Kontrollausgaben ergeben?

[mmnet]

Was hat der Blick in die JS-Fehlerkonsole deines Testbrowsers ergeben,

this.document ist nicht definiert.

this.document.b.src ="images/image2.jpg";
    activeImage = this;

...ist mit 'activeImage = this;' nicht definiert?

was haben deine Kontrollausgaben ergeben?

...Kontrollausgaben, da weiß ich nicht was gemeint ist

Maggie

[wahsaga]

this.document ist nicht definiert.

this.document.b.src ="images/image2.jpg";
    activeImage = this;

...ist mit 'activeImage = this;' nicht definiert?

Was soll damit definiert sein?

Ist dir klar, was this im vorliegenden Kontext ist?

...Kontrollausgaben, da weiß ich nicht was gemeint ist

Damit ist das gemeint, was damit immer gemeint ist - dass man (/du) nicht naiv und blauäugig annehmen soll, dass alle Variablen schon die Inhalte haben werden, die man sich vorstellt - sondern dass man das kontrolliert.

[mmnet]

Was soll damit definiert sein?

Ist dir klar, was this im vorliegenden Kontext ist?


Damit ist das gemeint, was damit immer gemeint ist - dass man (/du) nicht naiv und blauäugig annehmen soll, dass alle Variablen schon die Inhalte haben werden, die man sich vorstellt - sondern dass man das kontrolliert.

Darf ich noch einmal nerven?

function showImage()
  {
    var a
    var b
    if(activeImage){
      activeImage.document.a.src ="images/image1.jpg";  
   }
    this.b.src ="images/image2.jpg";
    activeImage = this;
  }

Ich vermute, dass 'this' sich auf das Objekt der Funktion, also 'window' bezieht.
Ich habe jetzt als erstes die Variablen 'a' und 'b' angezeigt und 'document' nicht mehr angesprochen.

Bin ich hiermit auf dem richtigen Weg?
Was muss ich noch beachten?

Gruß
Maggie

[wahsaga]

Ich vermute, dass 'this' sich auf das Objekt der Funktion, also 'window' bezieht.

Tut es, wenn man Funktionen über Eventhandler aufruft, aber normalerweise nicht. (Kommt aber auf die Art an, wie man den Eventhandler setzt.)

Ich habe jetzt als erstes die Variablen 'a' und 'b' angezeigt

Was meinst du mit "angezeigt"?

Du hast zwei lokale Variablen namens a und b deklariert, mit denen du absolut nichts weiter machst.

und 'document' nicht mehr angesprochen.

document hast du im gezeigten Code immer noch drin, allerdings jetzt an einer noch unsinnigeren Stelle.

Bin ich hiermit auf dem richtigen Weg?
Was muss ich noch beachten?

Der "richtige Weg" für sowas wäre: Sich mit den Grundlagen von JavaScript beschäftigen (und auch damit, welche Schnittstellen zum DOM angeboten werden). Und dann mit Logik und Verstand an die Sache herangehen - anstatt einfach irgendwie herumzuprobieren.

So lange du bei letzterem bleibst, werde ich mich mit dem Thema nicht mehr beschäftigen.

[Kropff]

Ich vermute, dass 'this' sich auf das Objekt der Funktion, also 'window' bezieht.

this innerhalb von Funktionen wird niemals funktionieren, wenn man es nicht als Parameter übergibt.

Peter

[pekka]

Ohne den ganzen Thread gelesen zu haben: Du willst einfach von einem Bild zum Anderen umschalten?

Was spricht gegen

<img src='xyz.jpg' onmouseover='this.src="xyz_farbig.jpg"' onmouseout='"xyz.jpg"'>

Das in eine Funktion auszulagern müßte einfacher gehen: Du mußt (wie oben schon gesagt) einfach "this" als Parameter übergeben.