[HTML] <option> mit bild

[VIPbanner_de]

ICh hab mal ne frage.. ich würde gerne eine <option> mit einem Bild versehen:

<optgroup label="Menüpunkt1" style="color:darkblue">
<option label="text">[GRAFIK] Text</option>
</optgroup>

Ich weiß das man keine Grafik so einfügen kann. Es muss irgendwie über ein Background image gehen. Das Problem ist wie mache ich das so, das das Image vor dem Text ist. Der Text ist Variabel, also er kann mal länger und mal kürzer sein. Auserdem sollte das Image nur 1 mal erscheinen und auch nur VOR dem Text... hat jemand ne idee?

 

[tleilax]

Du musst dem <option>-Tag vermutlich nur ein passendes padding-left, background-image und background-repeat: no-repeat geben.

 

[joschilein]

Das wird schwer bis unmöglich, da in option keine Elemente außer Text erlaubt sind. Genauso sieht es mit den Elternelementen optgroup und select aus.

Mit einer Idee und etwas Probiererei habe ich nun aber doch einen kleinen Weg über das Universalattribut style (CSS) gefunden:

<option label="text" style="background: url(test63/abc.ico) no-repeat;"> Text</option>

Es wird aber wieder unschön, wenn du dann versuchen willst die Schriftgröße zu verändern oder große Bilder (über Icongröße) einzubinden. Willst du einfach nur eine Auswahl aus verschiedenen richtigen Bildern (oder Thumbnails) machen, ist select völlig ungeeignet, da empfehlen sich dann eher Radiobuttons oder Checkboxen

 

[VIPbanner_de]

Das wird schwer bis unmöglich, da in option keine Elemente außer Text erlaubt sind. Genauso sieht es mit den Elternelementen optgroup und select aus.

Mit einer Idee und etwas Probiererei habe ich nun aber doch einen kleinen Weg über das Universalattribut style (CSS) gefunden:

<option label="text" style="background: url(test63/abc.ico) no-repeat;"> Text</option>

Es wird aber wieder unschön, wenn du dann versuchen willst die Schriftgröße zu verändern oder große Bilder (über Icongröße) einzubinden. Willst du einfach nur eine Auswahl aus verschiedenen richtigen Bildern (oder Thumbnails) machen, ist select völlig ungeeignet, da empfehlen sich dann eher Radiobuttons oder Checkboxen

Das klappt nicht ganz... ich habe es derzeit so bei mir drin.. jetzt nach deinem Vorschlag abgeändert:

{FOREACH|$user|$room.onlineusers}

{IF|$user.tempgroup > 3}document.write('<option label="{GET_JS|$user.nick}" style="background: url(https://www.v3.betterchat3.de/favicon.ico) no-repeat;">{GET_JS|$user.nick}</option>');{ELSE}

document.write('<option label="{GET_JS|$user.nick}">{GET_JS|$user.nick}</option>');{ENDIF}

{ENDFOR}


favicon.ico hab ich mal zum testen genommen.. das geht net.. udn wenn ich eine gif grafik aufrufen will gehts auch net

 

[joschilein]

Im Firefox 2.0 hats bei mir getan. Mit welchem Browser hast du es versucht?

 

[VIPbanner_de]

ich habs auch im neuen firefox probiert und mit IE7.. bei mir ging werde das eine noch das andere

 

[joschilein]

OK, im IE 7 gehts bei mir auch nicht (wundert mich bei dem Browser aber auch nicht sonderlich), dafür aber im Firefox immer noch:

    <select>
      <optgroup label="Menüpunkt1" style="color:darkblue; background: #FFFF00;">
        <option label="text" >[GRAFIK] Text</option>
        <option label="text" >[GRAFIK] Text</option>
        <option label="text" >[GRAFIK] Text</option>        
        <option label="text" style="background: #FF0000; background: url('test63/vw.ico') no-repeat;">[GRAFIK] Text</option>
        <option label="text" >[GRAFIK] Text</option>
        <option label="text" >[GRAFIK] Text</option>
      </optgroup>
    </select>