select....

[Olli2212]

Hallo,
ich habe schon vieles ausprobiert, aber es funktioniert einfach nicht. Ich möchte ein select-Menü nur mit Bildern erstellen (auch mit links), wie etwa hier:



ich wäre über jede hilfe sehr dankbar. mfG Olli2212

 

[ka9de]

Was hast du denn vieles ausprobiert?

 

[Olli2212]

Ich hab auf verschiedenster art versucht das bild reinzubekommen.

zum beispiel zwischen <option> und </option> per <img src=.... oder direkt als background in <option style="....

 

[threadi]

<option>-Elemente kann man nicht in jedem Browser so stylen, und daher auch nicht z.B. mit Hintergrundbildern versehen. Ich würde dir empfehlen nicht <select> dafür zu verwenden, eher eine Aufzählungsliste bei denen Du pro Listenpunkt ein Hintergrundbild hinterlegst. Jeder Listenpunkt müsste dann mit einem Link zur Übernahme der Einstellung versehen sein, evtl. auch als JavaScript-onclick-Eventhandler.

 

[Olli2212]

Könntest du mir bitte ein Beispiel geben, wenn es geht nur in HTML

 

[threadi]

Nein, weil dafür zwingend CSS zur Gestaltung sowie JavaScript zur Interaktion notwendig ist. Ein Beispiel habe ich nicht parat. Wenn Du es dir von jemandem programmieren lassen willst, frag in der Jobbörse. Wenn Du es selbst probierst und dabei dann Probleme hast, kannst Du gerne hier fragen.

 

[Cyberbob]

Wenn es ein durchgehendes Bild ist, kannst du es auch mit einer Map lösen:

<map name="menu">
<area shape="rect" coords="34,99,130,102" href="Topic1.html">
<area sh........>
...
</map>
<p><img src="menubar.gif" border="0" usemap="#menu" /></p>

Hierbei handelt es sich bei "rect" um ein Rechteck. Die Koordinaten findest du ganz leicht über ein Zeichnungsprogramm, beispielsweise Paint, heraus:
x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben

Ich weiß, dass der Thread schon alt ist, aber ich dachte mir es ist trotzdem hilfreich...nicht nur für Olli2212 ;)

 

[b4ttl3m4st3r]

Hallo,
Ich möchte ein select-Menü nur mit Bildern erstellen (auch mit links)

Select mit Bild UND Text:

<style type="text/css">
    option[value=en]:before { content:url("http://www.html.de/images/flags/en.gif"); }
    option[value=de]:before { content:url("http://www.html.de/images/flags/de.gif"); }
</style>
<select name="country">
    <option value="0" selected="selected">--- bitte wählen ---</option>
    <option value="en" >englisch</option>
    <option value="de" >deutsch</option>
</select>

Den Text weg zu bekommen überlasse ich dir.

 

[threadi]

Beachte den (nahezu) fehlenden Support für before im IE:
Browser Support for :before/:after Pseudo Elements | CSS-Tricks