Felix Riesterer: Einfügen einer "Variablen" in ein Input-Image Feld ?

Beitrag lesen

SELF-Forum

Einfügen einer "Variablen" in ein Input-Image Feld ?

Felix Riesterer
– Informationen zu den Bewertungsregeln

Lieber AndreasN,

Wie kann ich denn dann am einfachsten das Bild austauschen ?

  • Du hast Dein Vorschaubild (z.B. <img src="pfad/no_pic.png" id="vorschauthumbnail" />)
  • Du lädst per JS das anzuzeigende Bild. Beispiel:
     nachladebild = new Image(); // sollte für Eventhandler später eine globale Variable sein  
     nachladebild.src = "pfad/thumbnailbild.png";  
// Problemzone! Hier lädt der Browser jetzt das Bild nach, das Script wartet aber nicht! -> Eventhandler setzen...  
     document.getElementsById("vorschauthumbnail").src = nachladebild.src; // Der eigentliche Bilderwechsel
  • Du hast Dein Thumbnail anstelle des "no pic!"-Bildes.

Der obige Codeschnipsel blendet Dein "no pic!"-Bild sofort aus, da es ja jetzt eine andere Quelle hat. Solange das echte Thumbnail-Bild noch nicht geladen ist, sieht man nix, zumindest kein Bild... Um das zu vermeiden, kann man auf das "nachladebild" einen Eventhandler setzen (muss man je nach Browser anders machen!), bei dessen Feuern dann der eigentliche Bildwechsel erst durchgeführt wird.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

Beitrag melden
–
Informationen zu den Bewertungsregeln