Wechsel zweier Bilder bei gleichem Link

[Rioton]

Hallo,
ich habe gerade folgendes Problem:
Nach einem Klick auf einen Link soll Bild1 durch Bild2 ersetzt werden, soweit alles klar. Allerdings sollte nach einem erneuten Klick auf den gleichen Link Bild2 wieder durch Bild1 ausgetauscht werden.
Ich hoffe es kann mir jemand helfen und bedanke mich schon mal im Voraus ;D

[ChrisB]

Hi,

Nach einem Klick auf einen Link soll Bild1 durch Bild2 ersetzt werden, soweit alles klar. Allerdings sollte nach einem erneuten Klick auf den gleichen Link Bild2 wieder durch Bild1 ausgetauscht werden.

Der allgemeine Begriff für das hin und her schalten zwischen zwei Zuständen lautet englisch “toogle”.

Mit dem Stichwort findest du sicher was bei den gängigen JS-Frameworks - oder, und das würde ich empfehlen, du baust es dir selber, was vermutlich extrem viel schlanker ausfallen wird.
Wie ein einfacher Bildwechsel funktioniert, weißt du (oder googlest du) - und dann musst du nur noch die Funktionalität hinzufügen, die zwischen beiden Bildern wechselt. Das könnte man bspw. machen, in dem man den aktuellen Wert einer Variable auf Bild1 abfragt, und im Ja-Fall Bild2 setzt, im Nein-Fall wieder Bild1.

MfG ChrisB

[ChrisB]

Hi,

Der allgemeine Begriff für das hin und her schalten zwischen zwei Zuständen lautet englisch “toogle”.

Grmpf, nein - toggle.

MfG ChrisB

[Rioton]

Hi,

Nach einem Klick auf einen Link soll Bild1 durch Bild2 ersetzt werden, soweit alles klar. Allerdings sollte nach einem erneuten Klick auf den gleichen Link Bild2 wieder durch Bild1 ausgetauscht werden.

Der allgemeine Begriff für das hin und her schalten zwischen zwei Zuständen lautet englisch “toogle”.

Mit dem Stichwort findest du sicher was bei den gängigen JS-Frameworks - oder, und das würde ich empfehlen, du baust es dir selber, was vermutlich extrem viel schlanker ausfallen wird.
Wie ein einfacher Bildwechsel funktioniert, weißt du (oder googlest du) - und dann musst du nur noch die Funktionalität hinzufügen, die zwischen beiden Bildern wechselt. Das könnte man bspw. machen, in dem man den aktuellen Wert einer Variable auf Bild1 abfragt, und im Ja-Fall Bild2 setzt, im Nein-Fall wieder Bild1.

MfG ChrisB

Okay, Vielen Dank!
Habe mit diesem Begriff gleich auf der ersten Seite etwas passendes gefunden :D
Nochmals Danke, hat mir wirklich sehr geholfen,
MfG

[Don P]

Hallo,

Mit dem Stichwort findest du sicher was bei den gängigen JS-Frameworks - oder, und das würde ich empfehlen, du baust es dir selber, was vermutlich extrem viel schlanker ausfallen wird.

Warum denn in die Ferne schweifen, wenn das Gute liegt so nah...

Damit meine ich jetzt nicht das document.write dort, sondern den Ansatz im Script...

*wegduck*
Don P

[fastix®]

Moin!

Warum denn in die Ferne schweifen, wenn das Gute liegt so nah...

Stimmt.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[fastix®]

Moin!

Nach einem Klick auf einen Link

wird normalerweise vor allem die angezeigte Ressource ausgetauscht. Das bedeudet, es wir eine neue Seite geladen oder die alte nochmals. Erkläre, was das für ein Link sein soll.

Hintergrundbilder wechselt Du mit:

document.getElementById('id1').style.backgroundImage='url(/sonstwo)';

(Für <div id="id1" style="background-image:url(/sonstwas)">text oder nicht</div>)

Bilder wechselst Du mit:

document.getElementById('id2').src='/sonstwo';

(Für <img id="id2" src="/sonstwas" alt="" />)

toggeln bedeutet, Du suchts die Eigenschaft die das Element hat (was man schreiben kann kann man auch lesen) und wenn es die Eigenschaft 'A' ist, dann schreibst Du 'B' rein, sonst 'A'. Das Konstrukt sieht so aus:

if (was==wie) {  
    /* dann */  
} else {  
    /*sonst*/  
} 

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix