faermorn: Bildertausch!

Beitrag lesen

Wobei noch zu erklären wäre:

Bild(Nr.)      = Bild 50 x 50 pix
Bild(Nr.)K     = Bild 25 x 25 pix
Bild(Nr.)Kused = Bild 25 x 25 pix durchgestrichen

Tabelle 1 enthält zu Anfang Bild(Nr.)K.
Tabelle 2 enthält nur ein "leere" 50 x 50 Bilder.
Klick ich auf ein Bild in Tabelle 1, wird dieses Bild durch das entsprechende Bild(Nr.)Kused ersetzt (optisch also "durchgestrichen") und ein "leeres" Bild 50 x 50 in Tabelle 2 durch das entsprechende Bild(Nr.) 50 x 50.
Umgekehrt genauso. Klick ich auf ein bereits gewähltes Bild in Tabelle 2 wird es wieder durch ein "leeres" ersetzt und in Tabelle 1 das "durchgestrichene" gegen das ursprüngliche.

Problematisch ist nur, daß ich mit der
"function Bildertausch(BildA,BildobjektA,BildB,BildobjektB)"
die Tabelle halt nicht von links nach rechts gefüllt kriege. Ich habe schon diverse If-Versuche gestartet. Klappt aber irgendwie nicht.
Ich brauch eine Funktion(-serweiterung), die prüft, wo in Tabelle 2 (von links nach rechts) das erste "leere" Bild ist und dann dort das angeklickte Bild aus Tabelle 1 einfügt. Es soll egal sein, das wievielte Bild ich aus Tabelle 1 anklicke, in Tabelle 2 sollen die Bilder immer gegen das nächste "leere" Bild getauscht werden.

So, ich hoffe ich habe jetzt genug Verwirrung gestiftet.  :)

<html>
<head>
<title>Verschiebe Test</title>
</head>
<body>

<script type="text/javascript">
<!--

// Bilder als Objekte definiert:

Bild1 = new Image()
Bild1.src = "BLeer.JPG";

Bild2 = new Image()
Bild2.src = "B2.JPG";
Bild2K = new Image()
Bild2K.src = "B2K.JPG";
Bild2Kused = new Image()
Bild2Kused.src = "B2Kused.JPG";

Bild3 = new Image()
Bild3.src = "B3.JPG";
Bild3K = new Image()
Bild3K.src = "B3K.JPG";
Bild3Kused = new Image()
Bild3Kused.src = "B3Kused.JPG";

// Funktion für "doppelten" Bildertausch:

function Bildertausch(BildA,BildobjektA,BildB,BildobjektB)
{
document.images[BildA].src = BildobjektA.src;
document.images[BildB].src = BildobjektB.src;
}

//-->
</script>

<table>  <!-- Auswahl-Tabelle -->
<tr>
<td onClick="Bildertausch(0,Bild2Kused,2,Bild2)">
<img src="B2K.jpg">
</td>
<td onClick="Bildertausch(1,Bild3Kused,3,Bild3)">
<img src="B3K.jpg" alt="">
</td>
</tr>
</table>

<table> <!-- Gewählt-Tabelle -->
<tr>
<td onClick="Bildertausch(2,Bild1,0,Bild2K)">
<img src="BLeer.jpg">
</td>
<td onClick="Bildertausch(3,Bild1,1,Bild3K)">
<img src="BLeer.jpg">
</td>
</tr>
</table>

</body>
</html>