Bildvorschau mit JS

oceanblue · 20.03.2008, 21:52

Hi,

ich möchte mit JavaScript eine Bildervorschau realisieren. Ich habe eine Längere liste mit Bildern, die sich immer wieder verändern kann. Aus dieser Liste soll man auch mehrere Bilder gleichzeitig auswählen können. Deshalb habe ich mich für ein select-Feld entschieden. Über einen onMouseOver effekt soll eine Funktion aufgerufen werden, die mir ein kleines Bild für die Vorschau anzeigt. Das sieht dann so aus:

Code:

<select name="img_thumb[]" size="9" multiple>
<option value="bild1.jpg" onMouseOver=preview(bilder/bild1.jpg,'71895',200,150) onMouseOut=hide_div()>bild1.jpg</option>
<option value="bild2.jpg" onMouseOver=preview(bilder/bild2.jpg,'71895',200,150) onMouseOut=hide_div()>bild2.jpg</option>
</select>

Aber wie es aussieht, wird, egal auf welcher Zeile der Cursor steht, immer der Wert des letzten <option>-Feldes an die Funktion übergeben. Denn es wird das letze Bild der liste als Vorschaubild angeziegt.
Kann mir vielleicht jemand weiterhelfen und sagen woran das liegt bzw. was ich falsch gemacht habe?
Vielen Dank schon mal im Voraus

Gruß Oceanblue

nikosch · 26.03.2008, 20:13

Tja, der IE (zumindest der 6er) scheint mouseOver Aktionen nur für das select selbst zu unterstützen. Unter FF funktionierts bei mir.

Code:

<script type="text/javascript">
  function preview (name)
    {
    alert (name);
    }
</script>

...

<select name="img_thumb[]" size="9" multiple="multiple">
  <option value="bild1.jpg" onMouseOver="preview('bilder/bild1.jpg','71895',200,150);" onMouseOut="hide_div();">bild1.jpg</option>
  <option value="bild2.jpg" onMouseOver="preview('bilder/bild2.jpg','71895',200,150);" onMouseOut="hide_div();">bild2.jpg</option>
</select>

Im übrigen dürfte Dein Code etwas mehr standardkonform sein, denn auch lazy Implementierung kann Probleme verursachen:
- Attribute in Hochkommata einschließen
- String Angaben in Javascript in Hochkommata einschließen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bildvorschau	Zangelo	PHP Tipps 2007	10	10.12.2005 09:56
[Erledigt] Oscommerce Bildvorschau addon		PHP-Fortgeschrittene	14	19.05.2005 15:22
Zeilenumbruch bei Bildvorschau		PHP Tipps 2004	2	07.08.2004 15:33

20.03.2008, 21:52
oceanblue Neuer Benutzer Registriert seit: 29.12.2007 Beiträge: 9	Bildvorschau mit JS Hi, ich möchte mit JavaScript eine Bildervorschau realisieren. Ich habe eine Längere liste mit Bildern, die sich immer wieder verändern kann. Aus dieser Liste soll man auch mehrere Bilder gleichzeitig auswählen können. Deshalb habe ich mich für ein select-Feld entschieden. Über einen onMouseOver effekt soll eine Funktion aufgerufen werden, die mir ein kleines Bild für die Vorschau anzeigt. Das sieht dann so aus: Code: <select name="img_thumb[]" size="9" multiple> <option value="bild1.jpg" onMouseOver=preview(bilder/bild1.jpg,'71895',200,150) onMouseOut=hide_div()>bild1.jpg</option> <option value="bild2.jpg" onMouseOver=preview(bilder/bild2.jpg,'71895',200,150) onMouseOut=hide_div()>bild2.jpg</option> </select> Aber wie es aussieht, wird, egal auf welcher Zeile der Cursor steht, immer der Wert des letzten <option>-Feldes an die Funktion übergeben. Denn es wird das letze Bild der liste als Vorschaubild angeziegt. Kann mir vielleicht jemand weiterhelfen und sagen woran das liegt bzw. was ich falsch gemacht habe? Vielen Dank schon mal im Voraus Gruß Oceanblue


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.03.2008, 20:13
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Tja, der IE (zumindest der 6er) scheint mouseOver Aktionen nur für das select selbst zu unterstützen. Unter FF funktionierts bei mir. Code: <script type="text/javascript"> function preview (name) { alert (name); } </script> ... <select name="img_thumb[]" size="9" multiple="multiple"> <option value="bild1.jpg" onMouseOver="preview('bilder/bild1.jpg','71895',200,150);" onMouseOut="hide_div();">bild1.jpg</option> <option value="bild2.jpg" onMouseOver="preview('bilder/bild2.jpg','71895',200,150);" onMouseOut="hide_div();">bild2.jpg</option> </select> Im übrigen dürfte Dein Code etwas mehr standardkonform sein, denn auch lazy Implementierung kann Probleme verursachen: - Attribute in Hochkommata einschließen - String Angaben in Javascript in Hochkommata einschließen