Anzeigen von Länderflaggen per Auswahlmenü

[ThomasG]

wer kann mir weiterhelfen?
Ich habe ein Formular mit einer Auswahlliste für verschiedene Länder erstellt, welche auch funktioniert. Jetzt hätte ich gerne, dass mit dieser Liste nicht nur das entsprechende Land angezeigt wird, sondern noch zusätzlich die dazugehörige Länderflagge (JPG-Datei) unterhalb der Auswahlliste an einer von mir bestimmten Position. Wie kann ich solch eine Darstellung realisieren? Alle meine Versuche hierzu sind bislang gescheitert.
Wer kann mir einen Tip für solch eine Darstellung geben.
Besten Dank im vorraus!

Gruß
Thomas

[Beat]

Ich habe ein Formular mit einer Auswahlliste für verschiedene Länder erstellt, welche auch funktioniert. Jetzt hätte ich gerne, dass mit dieser Liste nicht nur das entsprechende Land angezeigt wird, sondern noch zusätzlich die dazugehörige Länderflagge (JPG-Datei) unterhalb der Auswahlliste an einer von mir bestimmten Position. Wie kann ich solch eine Darstellung realisieren? Alle meine Versuche hierzu sind bislang gescheitert.

Welche Versuche?

Wer kann mir einen Tip für solch eine Darstellung geben.

Eines Vorweg.
Ich würde gleich eine Spritemap verwenden (alle Flaggensymbole im gleichen Bild).

Du kannst dann mit CSS background den gewünschten Ausschnitt hinterlegen.
Hierbei wirst du jedem Land eine Klasse geben (Es gibt hierfür genormte Länder-Kürzel).
Jetzt musst du nur noch bei jeder Klasse auch die richtige background-position definieren.

mfg Beat

[Der Martin]

Hallo,

Ich habe ein Formular mit einer Auswahlliste für verschiedene Länder erstellt, ...

also vermutlich ein select-Element?

Jetzt hätte ich gerne, dass mit dieser Liste nicht nur das entsprechende Land angezeigt wird, sondern noch zusätzlich die dazugehörige Länderflagge (JPG-Datei) unterhalb der Auswahlliste an einer von mir bestimmten Position.

Mit vertretbarem Aufwand: Nutze Javascript.
Reagiere auf das onchange-Event der Selectbox, ermittle im Eventhandler den ausgewählten Eintrag, suche aus einem Array die zugehörige Bildressource heraus und setze die src-Eigenschaft eines Platzhalter-Bildes im Dokument entsprechend.
Als Vorbelegung für dieses Platzhalter-Bild würde ich ein neutrales Symbol nehmen; so sehen Nutzer ohne Javascript an der Stelle irgendeine Verzierung, wenn sie schon den Effekt nicht haben können.

Etwas komplizierter könnte es möglicherweise mit CSS gehen, indem du jedem option-Element der Liste als Pseudoelement :before ein Bild zuordnest, und dieses Pseudoelement an der gewünschten Stelle außerhalb der Liste positionierst.
Wie es da mit der Browserunterstützung aussieht, weiß ich nicht - zumindest alte IEs bleiben außen vor (wenn das für dich relevant ist), denn sie kennen :before nicht.

Ich hoffe, du willst das nicht für eine Sprachauswahl nutzen - Länderflaggen sind als Merkmal für Sprachen völlig ungeeignet, da Ländergrenzen oft nicht mit Sprachen übereinstimmen (Beispiele: Schweiz, Österreich, Belgien, Kanada, nord- und südamerikanische Staaten).

Besten Dank im vorraus!

Gab's die 'r' im Sonderangebot, dass du hier gleich zwei davon verschwendest? ;-)

So long,
 Martin