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

[AndreasN]

Holla,

Ich habe da ein Problemchen, an dem ich heute schon fast den ganzen Tag bastele, aber irgendwie nicht weiterkomme:

Ich habe mit Perl ein Bilderupload realisiert. Soweit so gut.
Mit Javascript werden aus dem Uploadfenster die Uploaddaten an das Hauptfenster weitergegeben. Auch kein Thema. Mit

opener.document.form1.attachmentid1.value = '345224';

übergebe ich die ID des Attachments an ein Hidden-Feld, damit dieses dann beim Abschicken des Formulars, komplett bearbeitet wird. Soweit auch kein Thema. Was mich jetzt nur sehr reizt, ist es in dem Formular eine art Vorschau für die Bilder zu machen: Ein Input-Image Feld, das vorher mit einem "NoPic" Blender versehen ist, sollte nach erfolgreichem  Upload das Thumbnail vom hochgeladenem Bild annehmen.

Wenn ich das ganze genauso versuche, wie die Übergabe an die Hidden Felder bekomme ich JS-Fehlermeldung:
Fehler: opener.document.form1.thumb1 has no properties
Quelldatei: .....attachment.cgi?picnr=1
Zeile: 17

und das obwohl das Feld natürlich existiert:
<input type="image" name="thumb1" value="" src="/board_thumbs/nopic.jpg" />

Nun meine Frage, ist es überhaupt möglich ein Bild in die vorhandene Seite einzufügen, ohne die Seite neu zu laden bzw das Formular schon mal ein mal abzuschicken ?
Oder gibt es eine andere (vielleicht elegantere) Möglichkeit der Vorschau auf das Bild ?

Bin für jeden kleinen Tipp dankbar. Vielen Dank im voraus.

MfG
AndreasN

[wahsaga]

hi,

Oder gibt es eine andere (vielleicht elegantere) Möglichkeit der Vorschau auf das Bild ?

ich würde kein image-input nehmen, sondern ein ganz normales bild - und dann dessen quelle so austauschen, wie es das anwendungsbeispiel Dynamische grafische Buttons zeigt.

gruß,
wahsaga

[AndreasN]

Hi wahsaga,

erst mal Danke für Deine (wie so oft) Turboantwort.

ich würde kein image-input nehmen, sondern ein ganz normales bild - und dann dessen quelle so austauschen, wie es das anwendungsbeispiel Dynamische grafische Buttons zeigt.

Manchmal macht man es sich unbequemer als man es braucht, aber so ist das nun mal ;)

Was mich an dem bekannten Bsp noch ein wenig Stört, ist dass ich ja beim laden der Haupseite, noch nicht das Bild habe, das später hochgeladen wird. Wie kann ich denn dann am einfachsten das Bild austauschen ? JS war irgendwie noch nie meine große Stärke, deswegen tue ich mir da oftmals schwer mit solchen Sachen wie bsw eben diese Variablenübergabe die Fensterübergreifend funktionieren muss etc.

Vielleicht hast Du ja noch einen kleinen Tipp für mich :)

Grüße
AndreasN

[Felix Riesterer]

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.

[wahsaga]

hi,

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!)

eben - deshalb, ggf. weniger umständlich:
anfangs nur ein transparentes gif anzeigen, "no pic!"-bild als hintergrundbild. wird dann vom geänderten bild überdeckt, sobald dieses angezeigt werden kann.
natürlich teilweise untauglich, wenn neues bild transparente bereiche enthälten könnte ...

gruß,
wahsaga