HTML/ Javascript

[Agronak]

Hey Leudis,
ich brauch ne Funktion in HTML oder Javascript,
bei der man 2 Bilder in einer Tabelle anklickt und diese dadurch ihren Platz tauschen (also wie bei diesen Tauschuzzle).
Ich bin leider bei dem Problem ziemlich ratlos.
Vielen Dank schonmal

[Renaku]

Hey Leudis,
ich brauch ne Funktion in HTML oder Javascript,
bei der man 2 Bilder in einer Tabelle anklickt und diese dadurch ihren Platz tauschen (also wie bei diesen Tauschuzzle).
Ich bin leider bei dem Problem ziemlich ratlos.
Vielen Dank schonmal

ich geh mal davon aus, dass du schon etwas Erfahrung mit JS und HTML hast. Deshalb geb ich nur mal Code mit:

HTML - Teil

Code: Alles auswählen

<a href="#" onClick="javascript:registriere_klick('bild1')"><img src=[dein bild] name="bild1"></a>
<a href="#" onClick="javascript:registriere_klick('bild2')"><img src=[dein bild] name="bild2"></a>
<a href="#" onClick="javascript:registriere_klick('bild3')"><img src=[dein bild] name="bild3"></a>

JavaScript-Teil (sollte schon im Header der HTML aufgerufen werden)

Code: Alles auswählen

<script language="javascript">

var klicks; // speichert die getätigten Mausklicks

var tmp_bild1_src;  // diese beiden speichern die zu tauschenden Bildquellen
var tmp_bild2_src;

var tmp_bild1_name;  // diese beiden speichern die Namen der Bilder,
var tmp_bild2_name;  // die zu tauchen sind

klicks = 0;

// funktion, die die Bildquellen von bild 1 und 2 vertauscht (wird kommplett von JS gesteuert, keine zusätzlichen eingaben hier nötig)
function tausche_bilder_1_und_2() {

document.images[tmp_bild1_name].src = tmp_bild2_src;  // zuweisung der neuen Bildqulle
document.images[tmp_bild2_name].src = tmp_bild1_src;  // bild 1 erhlält nun die zwischengespeicherte Quelle von bild 2
                                                      // bild 2 erhält die zwischengespeicherte Quelle von Bild 1

}

// Funktion, die durch das Klicken eines verlinkten Bildes aufgerufen wird
function registriere_klick(bild){

if(klicks == 0){
    tmp_bild1_src = Document.images[bild].src;  // wurde noch kein Klick getätig (logischer weise noch nichts ausgewählt)
    tmp_bild1_name = bild;  // speichere die werte für bild1
   klicks = klicks + 1;  // und erhöhe den klickzähler um 1
} else {
    tmp_bild2_src = Document.images[bild].src;  // wurde bereits ein bild1 ausgewählt (klicks ist > 0)
    tmp_bild2_name = bild;  // speicher die werte für bild2
    klicks = 0; // zetze den Zähler zurück
    tausche_bilder_1_und_2()  //rufe die funktion auf, die die bilder vertauscht
}

}

</script>

Ob der Code so funktioniert, weis ich nicht genau. Mein Letztes JS-Projekt liegt schon ne weile zurück.

Hoffe es ist einigermaßen nachvollziehbar.

[Agronak]

ok cool danke,
werds testen, wenn mir mein Projectpartner die Dateien schickt.