Hallo,
<div class="img-selectbox">
<div style="background-image: url(pics/test/pic003.png)">
<label>pic003.png</label>
<button type="button"></button>
</div>
Äh, du weißt schon, für was das label-Element gedacht ist?
Das funktioniert bis auf paar kleine Macken auch ganz gut, fuer 2 Probleme habe ich allerdings keine Loesung:
- die Box mit den 'Options' sollte auch onblur verschwinden, d.h., wenn irgendwo ausserhalb geklickt wird, da es aber in Wirklickeit div, ul, li und label sind, funktioniert onblur hier nicht
Überwache alle Fokus- und Klickevents dokumentweit. Wenn deren Zielelement nicht im Widget liegt, klappe zu.
- Wenn ich eine 'Option' mit einem ueberlangen Bildernamen habe, haelt sich FF an die vorgegebene Breite der 'Optionbox', waehrend IE diese entsprechend verbreitert. Allerdings wird nur die betreffende Option breiter. Am liebsten waere mir, wenn wie bei der Original-Selectbox sich alle Options der laengsten anpassen wuerden
Hmm... wieso gibst du eine Breite vor? Alles steckt in einem div, das ohne Vorgabe automatisch so breit wird, wie der Inhalt es erfordert. Kann man damit nicht arbeiten?
dazu braeuchte ich aber eine Methode, die Laenge des Textes in Pixeln herauszufinden.
Das ginge auch (offsetWidth o.ä.), erscheint mir aber unnötig umständlich.
Wenn das nicht geht, muss ich einen Weg finden, IE vom Ausdehnen der Option abzuhalten.
overflow:hidden, oder ignoriert IE das?
Mathias