Bild bei Klick wechseln oder zurückwechseln

[Orlando]

Werte Gemeinde,

aus der unterhaltsamen Reihe »Orlando kocht Spaghetti-Code«:

Ich habe ein Bild, das beim ersten Klick gegen ein anderes ausgetauscht werden soll. Beim zweiten Klick soll es wieder zurückgetauscht werden. Also immer schön hin- und hertauschen.

Wie setzte ich das am besten in einer ausgelagerten Funktion um? Nein, genauer, wie setzte ich das generell um? Ist ja nicht auszuhalten mit JavaScript, ich habe keine Ahnung.

Hilfe!

(Nein, ich poste den Zwischenstand nicht. Wäre mir peinlich.)

Roland

[Struppi]

Wie setzte ich das am besten in einer ausgelagerten Funktion um? Nein, genauer, wie setzte ich das generell um? Ist ja nicht auszuhalten mit JavaScript, ich habe keine Ahnung.

Generell geht nicht, du musst tricksen, z.b. so:

var neu = 'test2.gif';  
function change(img)  
{  
if( img.src.indexOf( neu ) > -1 )  
{  
img.src = img.davor;  
}  
else  
{  
img.davor = img.src;  
img.src = neu;  
}  

<img src="test.jpg" onclick="change(this)">

Struppi.

[Orlando]

Erstmal danke, leider funktioniert es nicht. Ich habe auch noch zwei Fragen:

var neu = 'test2.gif';

Gut, hier steht der Dateiname. Warum spuckt mir [code lang=javascript]alert(this.src)

  

> img.src = img.davor;  
  
Wo kommt »davor« plötzlich her?  
  
Roland  

-- 
[⌘](http://www.apple.com/de/macosx/tiger/)-[)](http://skop.net/self/iMac-1.jpg)

[Sven Rautenberg]

Moin!

Erstmal danke, leider funktioniert es nicht. Ich habe auch noch zwei Fragen:

var neu = 'test2.gif';

Gut, hier steht der Dateiname. Warum spuckt mir [code lang=javascript]alert(this.src)

  
Auch unlokal wird es das tun. Im src-Attribut steht, wenn man es ausliest, halt immer die komplette URL drin. Wenn man es schreibt und keine absolute URL reintut, ergänzt der Browser eine relative URL.  
  

> > img.src = img.davor;  
>   
> Wo kommt »davor« plötzlich her?  
  
Ist eine spontane Eigenschaftserweiterung des jeweiligen Image-Objekts, um die URL des Originalbildes zu speichern.  
  
Sofern du deine Tauschbilder mit einem automatisierbaren Namensschema versehen kannst (also z.B. "bild\_off.gif", "bild\_on.gif"), bräuchtest du weder die globale Namensvariable, noch diesen Zwischenspeicher, weil man sich dann beides herleiten kann.  
  
 - Sven Rautenberg

-- 
"Love your nation - respect the others."

[Orlando]

Warum spuckt mir alert(this.src) lokal immer den vollständigen Pfad aus?

Auch unlokal wird es das tun. Im src-Attribut steht, wenn man es ausliest, halt immer die komplette URL drin. Wenn man es schreibt und keine absolute URL reintut, ergänzt der Browser eine relative URL.

Danke, das sollte man vielleicht http://de.selfhtml.org/javascript/objekte/images.htm#src@title=dokumentieren.

img.src = img.davor;

Wo kommt »davor« plötzlich her?

Ist eine spontane Eigenschaftserweiterung des jeweiligen Image-Objekts, um die URL des Originalbildes zu speichern.

Hm. Hm? Ich nehme es mal zur Kenntnis. ;-)

Sofern du deine Tauschbilder mit einem automatisierbaren Namensschema versehen kannst (also z.B. "bild_off.gif", "bild_on.gif"), bräuchtest du weder die globale Namensvariable, noch diesen Zwischenspeicher, weil man sich dann beides herleiten kann.

Das ist der Fall, die Dateinamen sind beispielsweise »zustand-alt-gif« und »zustand-neu.gif« und ändern sich nicht. Von diesen Bildern gibt es mehrere im Dokument.

Roland

[Struppi]

Das ist der Fall, die Dateinamen sind beispielsweise »zustand-alt-gif« und »zustand-neu.gif« und ändern sich nicht. Von diesen Bildern gibt es mehrere im Dokument.

Beispielsweise oder konkret?
Aber wo Sven hin will ist, dass du mit indexOf() oder exec() und replace() nur diesen Teil des Namens jeweils auswechseln könntest.

Struppi.

[Orlando]

Das ist der Fall, die Dateinamen sind beispielsweise »zustand-alt.gif« und »zustand-neu.gif« und ändern sich nicht. Von diesen Bildern gibt es mehrere im Dokument.

Beispielsweise oder konkret?

Konkret.

Aber wo Sven hin will ist, dass du mit indexOf() oder exec() und replace() nur diesen Teil des Namens jeweils auswechseln könntest.

Fein, wir treffen uns dort. Sollte ich den Weg nicht finden, rufe ich noch einmal an.

Danke soweit.

Roland

[Orlando]

Aber wo Sven hin will ist, dass du mit indexOf() oder exec() und replace() nur diesen Teil des Namens jeweils auswechseln könntest.

So habe ich es jetzt gelöst, danke.

function change(bild) {  
 var neu = 'alt.gif';  
 if (bild.src.indexOf(neu) > -1) {  
  bild.src = bild.src.replace(/alt/g, "neu");  
 } else {  
  bild.src = bild.src.replace(/neu/g, "alt");  
 }  
}

<img src="alt.gif" onclick="change(this);">

Darüber hinaus habe ich eine Stunde lang deppert einen Fehler gesucht, weil zwei Elemente die selbe ID aufwiesen und eine Grafik immer verschwunden ist.

Roland

[Jeena Paradies]

Hallo,

Darüber hinaus habe ich eine Stunde lang deppert einen Fehler gesucht, weil zwei Elemente die selbe ID aufwiesen und eine Grafik immer verschwunden ist.

Mensch du sollst doch deine Seiten validieren wenn irgendwas nicht funxt!

Jeena

[Orlando]

Darüber hinaus habe ich eine Stunde lang deppert einen Fehler gesucht, weil zwei Elemente die selbe ID aufwiesen und eine Grafik immer verschwunden ist.

Mensch du sollst doch deine Seiten validieren wenn irgendwas nicht funxt!

*YMMD*

Ich bin doch genau so ein fauler Hund wie du! ;-)

Roland

[Jeena Paradies]

Hallo,

function flip(obj, flip) {  
 if(!obj.old) {  
  obj.old = obj.src;  
  obj.flip = flip;  
  obj.src = obj.flip;  
 }  
 else {  
  var tmp = obj.old;  
  obj.old = obj.flip;  
  obj.flip = tmp;  
  obj.src = obj.flip;  
 }  
}

<img src="alt.png" onclick="window.flip(this, 'wasneues.jpg');" />

Wobei mir noch jemand erklären muss, warum ich window.flip() beim zweiten mal aufrufen muss, da sie nach dem ändern des src nicht mehr erreichbar ist.

Jeena

[Jeena Paradies]

Hallo,

Geht natürlich noch ein bisschen eleganter:

f~~~javascript unction flip(obj, flip) {
 if(!obj.old) {
  obj.old = obj.src;
  obj.src = flip;
 }
 else {
  var src = obj.src;
  obj.src = obj.old;
  obj.old = src;
 }
}

  

> `<img src="alt.png" onclick="window.flip(this, 'wasneues.jpg');" />`{:.language-html}  
  
Das Problem mit window besteht aber immer noch.  
  
   Jeena  
![](http://jeenaparadies.net/pavatar.png)

-- 
[Screenshot unter OS X automatisch hochladen](http://jeenaparadies.net/weblog/2007/apr/screenshot-hochladen)  | [Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)

[Struppi]

<img src="alt.png" onclick="window.flip(this, 'wasneues.jpg');" />

Das Problem mit window besteht aber immer noch.

In deiner Funktion fügst du this (also dem Image element) eine Eigenschaft flip hinzu und in dem handler wird immer zuerst this.flip() aufgerufen.

Struppi.

[Jeena Paradies]

Hallo,

In deiner Funktion fügst du this (also dem Image element) eine Eigenschaft flip hinzu und in dem handler wird immer zuerst this.flip() aufgerufen.

Argh! Ich bin ja so dämlich manchmal, danke.

function flip(img, flipto) {  
 if(!img.old) {  
  img.old = img.src;  
  img.src = flipto;  
 }  
 else {  
  var src = img.src;  
  img.src = img.old;  
  img.old = src;  
 }  
}

<img src="alt.png" onclick="flip(this, 'wasneues.jpg');">

Jeena