Html/Java Auswahlverfahren mit Ländergrafik

Coody

Coody

Old&New Klammer
13 Juli 2006
1.090
53
Hallo ihr Lieben,
ich hab mal eine Frage. Ich wollte eine Auswahl-Form machen, dort sollte man wählen können Deutschland, Frankreich , England usw. .

Code: 
    <form method="post">
        <select name="Select1" style="width: 186px; height: 122px">
        <option></option>
        <option>England</option>         
        <option>Frankreich</option>
        <option>Niederlande</option>
        <option>Deutschland</option>
        </select></form>

Soweit kein Problem! Jedoch würde ich gerne bei jeder Wahloption vornedran ein 16x16 Flaggenbild machen, und natürlich sollte man, wenn man z.B Deutschland wählt auf eine bestimmte Seite weitergeleitet werden!

Wie setzte ich das am Besten um?

danke.)
 
Zuletzt bearbeitet:
Ich liebe aussagekräftige Titel :roll: - Bitte ändern und die Regeln einhalten.

@Topic:
<img> is in <option> nicht zugelassen, d.h. das wird anspruchsvoller, weil du mit Klicki-Bunti-JavaScript ein <select>-Element "nachbauen" musst.

Was du weiterleitet, ist ganz, wie beliebt. Natürlich nur, wenn das vorgeschriebene action-Attribut auch gesetzt is ;)
 
Eine ungetestete Idee von mir:

Man könnte doch bestimmt mit CSS einzelne Klassen für die Länder basteln und das gewünschte Bild als Hintergrundbild setzen, den Text dann entsprechend nach rechts verschieben.

Werds gleich mal testen...
 
CSS-Hintergrund in der Select-Box spielen leider noch nicht alle Browser mit. Weiß grad nicht auswendig, ob das eher "einige" oder mehr "viele" sind.
 
Leider eher viele. Auch aktuelle Versionen vom Opera und Chrome/Safari (sprich Webkit) spielen da nicht mit. IE kann ich leider nicht testen, aber ich weiss noch, dass zumindest der IE7 das auch nicht kann.
 
Also im aktuellsten Firefox (4 Beta 8 ) funktionierts recht schön:
testoptionbg7d053_thumb.jpg


Leider wie tleilax sagte im Opera schon nichtmehr...

Also musst du wohl das was mit JS knoddeln.
 
Hey,
danke erstmal an euch drei! Also wenn Claudis Version nicht geht; bleibt mir dann nur noch Java. Das Problem ist, da hab ich noch weniger Ahnung von. Könnte mir vielleicht einer kurz einen Eintrag schreiben, den Rest müsste man mit brain.exe einfügen können :ugly:

lg
Coody

@Edit = Ups irgendwie hat da ein Teil gefehlt!
 
Hey ;D

Java Kult, warum nicht :D

Nun zum Thema

Code: 
<script type="text/javascript">
 function Goto(){ 
var URL = document.form.site.options[document.form.site.selectedIndex].value; 
window.location.href = URL} </script>  



<body> 
<form name="form"> 
 <select NAME="site" SIZE="1" onChange="Goto()">  
    <option selected value="https://www.metin2.de"> Metin2 DE </option>  
    <option value="https://www.metin2.sg"> Metin2 SG </option> 
 <option selected>Bitte wählen</option>  

</select> </form>

So damit hab ich wieder das Auswahlmenü :D Jedoch bekomm ich die Bilder immernoch nicht drauf :D Sie sollten "rechts" davor stehen

Bilder werden mit src angegeben. Aber leider weiß ich nicht wie ich das da oben einbaue!


Danke für eure Hilfe :D Auch wenn ihr über irgendwelche Java Inseln anfügt xD
 
lege dir in Javascript ein Array mit den Bildern der Länder an.
dann kannst du getrost beim wechseln des Indexes der Select Box den jeweiligen nutzen, um das Img des Landes auszuwählen und anzuzeigen.

Verständlich geschrieben ?
 
Kleine Anmerkung wie du das eventuell geschickter lösen kannst mit deiner 'Goto'-Funktion:

Code: 
<script type="text/javascript">
function Goto(element) {
    window.location.href = element.options[element.selectedIndex].value;
}
</script>  



<body> 
<form name="form"> 
 <select NAME="site" SIZE="1" onChange="Goto(this)">  
    <option selected value="https://www.metin2.de"> Metin2 DE </option>  
    <option value="https://www.metin2.sg"> Metin2 SG </option> 
 <option selected>Bitte wählen</option>  

</select> </form>

Einfach das aktuelle Element übergeben, dann kannst du das auch variabel für andere SELECT-Felder benutzen ;) [untested]


Zum Problem: Es gibt schon ein fertiges jQuery-Plugin um ein SELECT-Element automatisiert durch ein stylebares-Element zu ersetzen.. Ich finde es nur leider gerade nicht.
Das hier war es nicht, aber das ist auch so ähnlich.. Das was ich im Kopf habe fand ich noch schöner :-?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

D
Html Quellcode für M2 und Preis Rechner
Antworten
0
Aufrufe
3K
DerTischler5575
D
Zurück
Oben