✔ Swap Script Erklärung

[Dustin84]

Hallo,

ich habe folgendes Script, um 2 Bilder zu tauschen:

// swapImage
function swapImage(imgName,swapImg)
{
document.images[imgName].src=swapImg;
}
</script>

Ich erstelle dynamisch Thumbs. "mini_slide" für die kleinen Thumbs und "mini_big" für das große Thumb.

Wenn ich das Script in folgendes ändere, dann klappt es nicht:

// swapImage
function swapImage(mini_slide,swapImg)
{
document.images[imgName].src=mini_big;
}
</script>

Ich hatte es schon einmal durch zufall zum laufen bekommen aber die Datei leider überschrieben :-( Kann mir hier wer weiterhelfen ?

Gruß
D.

 

[Maik]

Hi,

und wofür soll die Scriptänderung jetzt genau dienen bzw. gut sein?

function swapImage(imgName,swapImg) {
        document.images[imgName].src=swapImg;
}

Die beiden Funktionsparameter "imgName" und "swapImg" definieren:

imgName = Name der "Startgrafik"
swapImg = URL der "Tauschgrafik"

Der Funktionsaufruf zum Bildertausch erfolgt dann z.B. beim Anklicken der Verweise mit dem onclick-Event auf diese Weise:

onclick="swapImage('Name_der_Startgrafik','pfad/zu/Tauschgrafik.jpg')"

mfg Maik

 

[Dustin84]

<script type="text/javascript"><!-- Thumb switchen -->
// swapImage
function swapImage(mini_slide,mini_big)
{
document.images[mini_slide].src=mini_big;
}
</script>

So sollte es eigentlich funktionieren, tut es aber nicht.

document.images <-- was bedeutet das genau ?

 

[Maik]

Wie das Script grundsätzlich funktioniert, hab ich dir doch gestern Abend erläutert, und in dem Thema JavaScript-basierte Bildergalerie, wo das Original-Script herstammt, geht seine Funktionsweise aus dem Quellcode (JS + HTML) klar und deutlich hervor.

Demnach müsste sich das Pendant zu deiner umgeschriebenen "Script-Variante" in deinem HTML-Code so darstellen:

• Ein Grafikelement mit dem name-Attribut und darin dem Objekt-Namen, der über den Funktionsparameter "mini_slide" definiert wird, und das in einem vordefinierten Seitenbereich später durch die "Tauschgrafiken" ersetzt werden soll:
  

<img name="Name_der_Startgrafik" src="pfad/zu/Startgrafik.jpg" alt="">

• Funktionsaufruf in den Links, um die entsprechende Tauschgrafik anstelle der Startgrafik anzuzeigen:
  

<a href="#" onclick="swapImage('Name_der_Startgrafik','pfad/zu/Tauschgrafik_mini_big_xxx.jpg')"><img src="mini_slide_xxx.jpg" alt=""></a>

Wenn ich deinen umgemodelten Scriptcode so betrachte, hab ich allmählich den Eindruck, dass du da etwas gehörig durcheinander bringst, denn die "Thumbs" haben mit dem Bildertausch nur soweit was zu tun, als dass sie (in einem Menü) als "Vorschau-Grafiklinks" dienen, um mit ihnen die großen Bilder aufzurufen, die dann in einem anderen Seitenbereich anstelle der "Startgrafik" gezeigt werden.

Als grundlegendes Beispiel, wie sich das in der Seite dann darstellt, sei an dieser Stelle mal http://www.cssplay.co.uk/menu/gallery_click.html genannt, bei dem die "Thumbs" ebenfalls sichtbar bleiben.

Und das ist es doch, was du mit dem verwendeten "jCarousel"-Script verfolgst: Die Thumbs werden in der "jCarousel"-Box als grafische Verweise ausgegeben, und rufen dann von dort aus, wie von mir jetzt zweimal gezeigt, mit der "swapImage()"-Funktion im onclick-Event die großen Bilder in einem anderen DIV-Container auf, der die "Startgrafik" enthält.

Zur Syntax "document.images" empfehle ich dir das Kapitel für das images-Objekt.

mfg Maik

 

[Dustin84]

Es will nicht in meinen Kopf, warum das so falsch ist....gibts hier keinen WebEdition Profi ?

<script type="text/javascript"><!-- Thumb switchen -->
// swapImage
function swapImage(mini_slide) // das aktuelle Bild...
{
document.images[mini_big].src=mini_big; // wird durch das Thumb mini_big in den container mini_big geladen
}
</script>

Es hat garantiert nichts mit dem Link zu tun. Der funktioniert, sobald das Javascript richtig ist. (Wie gesagt, das ganze lief schon einmal)

 

[Maik]

Na, bald hast du ja dann alle denkbaren Konstellationen für die beiden Funktionsparameter durchgespielt

Die "einzig wahre", weil funktionstüchtige Konstellation hast du mit dem Original-Script vorliegen, und so verweise ich dich auf meine ersten beiden Antworten in diesem Thema, wie sich die Funktion swapImage(imgName,swapImg) zusammensetzt und wie der Funktionsaufruf im HTML-Code vonstatten geht

document.images[mini_big].src=mini_big; // wird durch das Thumb mini_big in den container mini_big geladen

Absolut falsch, was du da so zusammenkommentierst

Der Wert für die src-Eigenschaft des images-Objekt stellt keinen Container dar (wie z.B. eine DIV-Box), sondern erhält, dem src-Attribut des <img>-Tags entsprechend, den Pfad zu einer Grafikdatei - siehe hierzu http://de.selfhtml.org/javascript/objekte/images.htm#src -, die anstelle dieses Grafikobjekts angezeigt werden soll und entspricht im Original-Script dem zweiten Funktionsparameter swapImg

Und dein erstes mini_big in den eckigen Klammern repräsentiert lediglich den "Platzhalter" für den Objekt-Namen (nicht zu verwechseln mit dem Dateinamen!) der Grafik, die im HTML-Code enthalten ist, und gegen das Grafik-Objekt getauscht werden soll, das in der src-Eigenschaft angegeben wird. Das bedeutet demnach, dass du den Namen der Grafik (<img name="Name_der_Startgrafik" src="pfad/zu/startgrafik.jpg">) nicht in dieser JS-Zeile nennst, falls mini_bg bei dir dem Wert im name-Attributs im <img>-Tag entspricht

Ergo kannst du in dieser Scriptzeile nicht zweimal denselben (gleichlautenden) Parameter nennen.

Vielleicht schaust du dir besser nochmal den Quellcode des Original-Beispiels im Thema JavaScript-basierte Bildergalerie etwas genauer an, um endlich zu verstehen, wie er in seiner Funktionsweise aufgebaut ist, und liest dich vor allem mal in die JS-Materie ein, bevor du hier wild mit den Script-Codes herumjonglierst, dass einem vom bloßen Zuschauen übel wird.

Wenn du es aber weiterhin vorziehst, meine Erläuterungen zu ignorieren, anstatt den Script-Code im Original 1:1 zu übernehmen, und stattdessen lieber dein eigenes Wurschtel-Süppchen kochen willst, kann dir hier auch nicht weitergeholfen werden.

Da die Funktionsweise des Scripts von mir nun ausführlich und in mehrfacher Ausfertigung erklärt wurde, schließe ich diesen Thread mit dem Zitat:

Ich habe fertig!

mfg Maik