nicht angemeldet
Bildertausch!
Hi Leute!
Erstmal Danke für diese Seite. Acker mich grad durch. Für 'nen absoluten Neuling in Sachen JS ist hier wirklich sehr viel Hilfreiches.
Vorab, zu meiner Verteidigung, möchte ich erwähnen, das ich mich seit knapp einer Woche mit JS beschäftige!
So, jetzt zu meiner Frage/meinem Problem:
Ich habe 2 HTML-Tabellen mit Graphiken:
Tabelle 1 enthält Bilder zur Auswahl, die beim Anklicken in
Tabelle 2 (in den <td>-Elementen liegen zu Beginn nur "leere" Graphiken) gesetzt werden sollen und wiederum durchgestrichen in Tabelle 1 erscheinen sollen. Soweit klappt mein script ja dann auch problemlos.
Mein Problem ist jetzt, daß ich es nicht schaffe die zweite Tabelle von links nach rechts zu füllen, sondern nur durch die "function Bildertausch()" vordefinierte Plätze belegen kann. Ich habe 'zig Wenn-Dann-Variationen versucht, komme aber zu keiner Lösung.
Hier mein Script:
<script type="text/javascript">
<!--
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";
function Bildertausch(BildA,BildobjektA,BildB,BildobjektB) Bildertausch
{
document.images[BildA].src = BildobjektA.src;
document.images[BildB].src = BildobjektB.src;
}
//-->
</script>
In dem script arbeite ich nur mit zwei Bildern. Es sollen mal so um die 50 - 60 werden. Ich bin für jeden Vorschlag dankbar!
Faermorn
-
Die Tabelle und mein Functionsaufruf sind vielleicht auch noch interessant für mein Problem :)
Die Bilder auf der Seite fangen mit "B2K.jpg" an.
<table>
<tr>
<td onClick="Bildertausch(0,Bild2Kused,2,Bild2)">
<img src="B2K.jpg">
</td>
<td onClick="Bildertausch(1,Bild3Kused,3,Bild3)">
<img src="B3K.jpg">
</td>
</tr>
</table><table>
<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-
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 durchgestrichenTabelle 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>-
Hallo faermorn,
habe ich dich richtig verstanden, dass du so eine Art Puzzle basteln willst, bei dem du die Einzelteile in verkleinerter Form in einem Menü darstellen willst, um sie dann der Reihe nach großformatig in deine Tabellenzellen einzufügen, sodass wenn man sich "vertut" man den Zug auch wieder rückgängig machen und korrigieren kann?
Wow, da hast du dir für einen JS-Anfänger ja gleich eine mächtig komplexe Aufgabe gestellt.
Wenn dem so ist, wäre meine Idee, all deinen zunächst leeren Platzhalter-Gifs in der großen Tabelle Name-Attribute, vielleicht entsprechend dem Dateinamen (ohne Dateierweiterung) der richtigen Lösung zu geben, die dort schlussendlich platziert werden soll.
Diese Namen schreibst du dir in der Reihenfolge ihres Auftauchens im HTML-Code in ein Array, mit dem du die einzelnen Groß-Bilder später ansprechen kannst.
In einer Funkktion mit einer For-Schleife könntest du dieses Array dann durchlaufen, um zu ermitteln, wo das erste "leere" Bild ist, dessen Source das leere Gif ist.
function woFuellen(){
for(i=0; i<deinGrossbildNamensAttributeArray.length; i++) {
if(document.images[deinGrossbildNamensArray[i]].src=="leer.gif" {
return i;
}
}
}Gruß Gernot
-
-
-
Hallo Faermorn,
Erstmal Danke für diese Seite. Acker mich grad durch. Für 'nen absoluten Neuling in Sachen JS ist hier wirklich sehr viel Hilfreiches.
.. und sogar auch für Fortgeschrittene, ich wüsste gar nicht, was ich ohne SelfHTML tun sollte. ;-)
Vorab, zu meiner Verteidigung, möchte ich erwähnen, das ich mich seit knapp einer Woche mit JS beschäftige!
Willkommen!
So, jetzt zu meiner Frage/meinem Problem:
Ich habe 2 HTML-Tabellen mit Graphiken:
Tabelle 1 enthält Bilder zur Auswahl, die beim Anklicken in
Tabelle 2 (in den <td>-Elementen liegen zu Beginn nur "leere" Graphiken) gesetzt werden sollen und wiederum durchgestrichen in Tabelle 1 erscheinen sollen. Soweit klappt mein script ja dann auch problemlos.Lad das doch mal ins Netz hoch, sodass wir uns ein Bild machen können, womit du bereits zufrieden bist.
Mein Problem ist jetzt, daß ich es nicht schaffe die zweite Tabelle von links nach rechts zu füllen, sondern nur durch die "function Bildertausch()" vordefinierte Plätze belegen kann. Ich habe 'zig Wenn-Dann-Variationen versucht, komme aber zu keiner Lösung.
Ich kann mir nach deiner Beschreibung noch nicht so recht vorstellen, woran es hakt, helfe aber gerne, wenn ich es mit Hilfe deines Uploads verstanden habe.
Gruß Gernot
-
Hey das ging ja ziemlich flott. Genial!
Hallo Gernot,hochladen kann ich's leider nicht, da ich hier im Büro sitze und zu Hause kein Netz habe. Ich könnte höchstens das gesamte HTML-Dokument hier reinsetzen, allerdings ohne die Graphiken.
-
Hallo faermorn,
hochladen kann ich's leider nicht, da ich hier im Büro sitze und zu Hause kein Netz habe. Ich könnte höchstens das gesamte HTML-Dokument hier reinsetzen, allerdings ohne die Graphiken.
Dann wird es mit meiner Vorstellungskraft wieder schwierig. Aber versuch doch mal, dein Problem genauer zu beschreiben, Tabelle 2 "füllen", "durchgestrichene Elemente in Tabelle 1" ? Was soll eigentlich genau auf deiner Seite passieren und worin unterscheidet sich das, was passieren soll von dem, was zurzeit wirklich passiert?
Gruß Gernot
-
-