Iconen in SELECT of pulldown box

[MrDummy]

Deze is aantal keren gevraagd op aantal site op Google. Er zijn echter geen duidelijke antwoorden te vinden. Er zijn bijna geen tutorials te vinden hiervoor. Het enige wat ik wel vind zijn de Javascript menu's waar men iconen en tekst in elke optie kan leggen. Het zijn dropdown menu's.
Die zijn er wel. Ook ik vind CSS dropdown menu's. Maar dat zocht ik eigenlijk niet.

Maar ik moet niet zo'n groot menubalk hebben. Het enige wat ik zoek is de mogelijkheid om soort SELECT box te maken waar elke option regel een klein icoontje + tekst bevat. Ik weet dat iconen niet mogelijk zijn. Iemand zegt dat je icoon buiten OPTION velden moet plaatsen.

Men kan met CSS of Javascript een SELECT box namaken en alsnog mogelijk maken. Ik wil graag de invloed van Javascript klein houden. (om laadtijd klein te houden)

Ik heb eens op een site een taalkeuze select menu gezien. Ik zie daar rij vlaggen als iconen en tekst ernaast. Zo ongeveer moet ik hebben.

Wie weet een eenvoudige code opzet om zoiets te kunnen maken? De meeste voorkeur gaat uit naar CSS en scheutje JS. Maar niet zwaar Javascript menu...

[webinn]

kan je enkel als je volledig in JS werkt (met DHTML bv)

[ Voor 6% gewijzigd door webinn op 19-05-2006 13:07 . Reden: typo ]

[Zoefff]

Kan je dit niet met CSS i.c.m. background-image voor elkaar krijgen?

[PhoeniX-]

Kijk hier eens! Er zit een free trial bij ..

[Zoefff]

Zoiets?

Cascading Stylesheet:

select {
    width:150px;
}
    option {
        background-repeat:no-repeat;
        padding-left:20px;
    }
    .kraagjes {
        background-image:url("http://www.kraagjes.nl/favicon.ico");
    }
    .gerard {
        background-image:url("http://www.gerardhenninger.nl/favicon.ico");
    }
    .jelle {
        background-image:url("http://www.jellejanvanveelen.nl/favicon.ico");
    }
    .tweakers {
        background-image:url("http://www.tweakers.net/favicon.ico");
    }

HTML:

<select name="select">
    <option>Kies...</option>
    <option class="kraagjes" value="http://www.kraagjes.nl">kraagjes.nl</option>
    <option class="gerard" value="http://www.gerardhennigner.nl">gerardhenninger.nl</option>
    <option class="jelle" value="http://www.jellejanvanveelen.nl">jellejanvanveelen.nl</option>
    <option class="tweakers" value="http://www.tweakers.net">tweakers.net</option>
</select>

Voorbeeldje op http://crew.tweakers.net/Zoefff/test/select_icons.html (met standaard Dreamweaver jump-menutje ) werkt alleen in Fx, maar doet daar volgens mij wel wat je bedoelt.

[BtM909]

Het is wel redelijk mogelijk. Geen garanties voor browsers-support, want ik heb het specifieke topic niet doorgelezen

[rml][ html] plaatjes in selectbox[/rml]

[MrDummy]

Ja, die Fx-only oplossing met CSS heeft weinig nut...
Het moet ook in IE kunnen werken.

De link paar posts boven heeft inderdaad iconen (of hele kleine png plaatjes) wat dus mogelijk is.
Maar liefst gratis code en niet licensed zut. En het hoeft niet zo ingewikkeld worden, zodat iedereen kan doen...
Op dit moment is JS de bruikbare code die het kan.

[PhoeniX-]

MrDummy schreef op vrijdag 19 mei 2006 @ 14:59:
Ja, die Fx-only oplossing met CSS heeft weinig nut...
Het moet ook in IE kunnen werken.

De link paar posts boven heeft inderdaad iconen (of hele kleine png plaatjes) wat dus mogelijk is.
Maar liefst gratis code en niet licensed zut. En het hoeft niet zo ingewikkeld worden, zodat iedereen kan doen...
Op dit moment is JS de bruikbare code die het kan.

Nou ja, geef toe - het ziet er gelikt uit Misschien brengt de source hiervan je op ideeën!

[Zoefff]

Nouja, als ik jou was zou ik toch wel doorbouwen op mijn code (of een andere CSS-oplossing), en een alternatief voor IE proberen te vinden

Ik heb het bijvoorbeeld nog niet geprobeerd met normale plaatjes, misschien dat dit wel werkt?

[MrDummy]

Nog meer voorbeelden:
http://www.easy-designs.net/articles/replaceSelect/
http://www.easy-designs.net/articles/replaceSelect2/

Niet echte select box omdat deel van pagina meebeweegt, maar hier zijn eigen variaties en afbeeldingen heel goed mogelijk.
Intikken van datavelden gaat simpel via option velden....

Weet niet of images ernaast kunnen in de code.

En dit is ook heel mooi, maar jammer niet gratis:
http://www.web--templates.org/menus/css-select-menu.html

Nog es, site met script voor menu met images erin: http://www.milonic.com/

Finally something free: http://www.dynamicdrive.com/dynamicindex1/jsdomenu/index.htm

[ Voor 47% gewijzigd door MrDummy op 31-05-2006 13:21 ]

[MrDummy]

Goed, ik heb nu soort Select box simulatie geprobeerd te maken, na lang zoeken naar voorbeeld scripts op inet en na vele pogingen is gewenste resultaat eindelijk bereikt.
Het werkt tot nu toe goed, de gekozen waarde wordt zelfs doorgegeven na submit form.
Er is wel wat javascript meuk nodig om allemaal mogelijk te maken, maar wel simpel gehouden.
Het is ds CCS+JS combinatie geworden.

De voorbeeld is hier:
http://mrdummy.net/dropdown/dropdown4.php

Op pagina onderaan zie je welke scripts/codes ik heb gebruikt.

Ik maak gebruik van diverse scripts en combineer ze samen zodat het mogelijk wordt.
Als je wat suggesties of verbeteringen voorstelt; laat maar horen.
Je mag de code nog verder bijschaven voor mooiere look. Of letterlijk Select box nabootsen. Maar wel met afbeeldingen naast elke keuze.