Farbsimulator (Bildaustausch mit jQuery)

[jhuhle93]

Moin ihr Lieben!

Ich würde gerne eine Farbsimulation auf einer Webseite umsetzen, da ich aber noch totaler Anfänger in Sachen jQuery bin, weiß ich nicht so recht, wie ich da anfangen soll.

Ich habe oben einen Bereich für ein Bild und da drunter dann diverse div's mit einer Hintergrundfarbe. Je nach dem auf welche Farbe der User dann klickt, soll dann das entsprechende Bild zu der Farbe angezeigt werden.

Wie löst man sowas?

Momentan sieht es bei mir ungefähr so aus:

<div class="simulation-image">
<img class="bild1" src="bild1.jpg" width"100%" height="auto">
<img class="bild1" src="bild2.jpg" width"100%" height="auto">
<img class="bild1" src="bild3.jpg" width"100%" height="auto">
...
</div>
<div class="farben">
<div class"color-box box-color-1"></div>
<div class"color-box box-color-2"></div>
<div class"color-box box-color-3"></div>
....
</div>

 

[msa1989]

Das ganze sollte so funktionieren:

Du hast dein "simulation-image" und je nachdem welche Farbe geklickt wird, tauscht dein jquery die "src" des Bildes aus.

<div class="simulation-image">
<img id="meinBild" src="aktuller Pfad" .../>
</div>

in jQuery kannst du z.B. mit
$("#meinBild").attr("src","dein neuer Bildpfad");
den jeweiligen Pfad ändern

 

[jhuhle93]

Vielen Dank msa1989! Ich werde das gleich mal ausprobieren