Hintergrundbild bei Klick verändern

[-xXx-]

Hallo!

Ich möchte eine Funktion programmieren, bei der das Hintergrund-Bild eines DIV-Bereiches bei einem Klick je nach dem aktuellen Hintergrund-Bild verändert werden soll. Meine Funktion sieht zurzeit so aus:

JS-Code:

function upgrade(e){  
document.getElementById("id"+i).style.backgroundImage = 'url(img/bg1.png)';					  
};  

HTML-Code:

<div id='id1'></div>  
<div id='id2'></div>  
<div id='id3'></div>  
<div id='id4'></div>  
usw.

Das funktioniert auch super:
Bei Ausführung der Funktion wird bei dem jeweiligen div das Hintergrund-Bild geändert. (Wann die Funktion ausgeführt wird, habe ich jetzt mal nicht mit reingeschrieben, ist auch unwichtig).
Nur wie kann ich das bewerkstelligen, dass wenn bei einem DIV das Hintergrund-Bild schon bg1.png ist, dass es dann bg2.png (Bei Ausführung der Funktion wird)?
Dazu müsste ich ja den Wert des Background-Images irgendwie auslesen. Ist das möglich, weiß jemand, wie ich das machen kann?

LG
-xXx-

[suit]

Dazu müsste ich ja den Wert des Background-Images irgendwie auslesen. Ist das möglich, weiß jemand, wie ich das machen kann?

woher auch immer in deiner Funktion "i" herkommt, ich gehe davon aus, dass es den Index des Elements enthält, den du dann entsprechend auch anstatt der 1 verwenden kannst.

[-xXx-]

Dazu müsste ich ja den Wert des Background-Images irgendwie auslesen. Ist das möglich, weiß jemand, wie ich das machen kann?

woher auch immer in deiner Funktion "i" herkommt, ich gehe davon aus, dass es den Index des Elements enthält, den du dann entsprechend auch anstatt der 1 verwenden kannst.

Das ist korrekt ;)

[jumini]

Nur wie kann ich das bewerkstelligen, dass wenn bei einem DIV das Hintergrund-Bild schon bg1.png ist, dass es dann bg2.png (Bei Ausführung der Funktion wird)?
Dazu müsste ich ja den Wert des Background-Images irgendwie auslesen. Ist das möglich, weiß jemand, wie ich das machen kann?

  
function upgrade(e){  
// i ist deinem Beispiel nach in der Funktion undefined  
document.getElementById("id"+i).style.backgroundImage = 'url(img/bg1.png)';  
  
// angenommen das entstand durch die verkürzung des Code und dieser Funktioniert soweit:  
var elem = document.getElementById("id"+i);  
var bg   = 'img/bg'+(elem.style.backgroundImage == 'img/bg1.png' ? 1 : 2)+'.png';  
elem.style.backgroundImage = bg;  
// Dein Schnipsel entfällt natürlich  
};  

Ob die Verwendung von style.backgroundImage mit allen Browsern vereinbar ist, kann ich dir nicht genau sagen. Falls du eine Bibliothek wie Prototype oder jQuery nutzt, verwende get- & setStyle.

Gruß,
jumini

[jumini]

var bg   = 'img/bg'+(elem.style.backgroundImage == 'img/bg1.png' ? 1 : 2)+'.png';

  
soll natürlich  
  
~~~javascript
  
var bg   = 'url(img/bg'+(elem.style.backgroundImage == 'url(img/bg1.png)' ? 1 : 2)+'.png)';  

heißen.

Sobald du mehr als zwei Hintergrundbilder verwendest, sieht das ganze aber schon anderst aus.

Gruß,
jumini

[Matthias Apsel]

Om nah hoo pez nyeetz, -xXx-!

Du brauchst eine if-Abrage und könntest den Modulo-Operator verwenden. Möglicherweise möchtest du auch eine zufällige Änderung. Dazu hatten wir hier vor kurzem einen Thread. Eventuell helfen dir auch Sprites.

Matthias

[Steel]

Moin!

Ich verstehe Dich so:

Du hast n Elemente.
Jedes Element hat einen Hintergrund zugewiesen.
Die Hintergrundbilder sind voneinander unabhaengig.
Bei Klick soll ein bestimmtes Element einen neuen Hintergrund zugewiesen bekommen.

Speichere fuer jedes Element einen Wert der sich auf den aktuellen Hintergrund bezieht. Bei Klick werte diesen aus und handle entsprechend.

Fuer ein etwas komplexeres System wuerde ich jedem Element ein Array zuweisen, dass Hintergrundnamen enthaelt. Fuer das Element selber wuerde der Index des Arrays gespeichert werden. Damit koennte man bequem ueber eine Funktion n Elemente mit jeweils unterschiedlichen und beliebig langen Hintergrundfolgen versehen.

Ein simples System koennte auch daraus bestehen, dass Du nur den Wert des aktuellen Hintergrundes ausliest und z.B. mit RegExp bearbeitest um herauszufinden, welches das aktuelle Bild ist um dann einfach einen Indexwert (im Beispiel die Zahl) zu veraendern.

Mir persoenlich gefaellt aber meine erste Version besser. Jedes Element bekomt einen Index fuer das aktuelle Bild verpasst und Irgendwo hast Du die Bilder gespeichert. Das kann ein Array sein, oder ein Case Konstrukt, oder was immer. Wobei ein Array in meinen Augen deutlich eleganter ist.