Question

50

Dropdown select with images

rated 0 times [ 56] [ 6] / answers: 1 / hits: 135731 / 13 Years ago, wed, february 29, 2012, 12:00:00

I wanted to create a dropdown select which has images instead of text as the options. I've done some Googling and searching here on Stack Overflow, and the answer generally given is to use the jQuery combobox.

The problem with this solution, it seems to me, is that you have to provide text. It looks like the images are just icons that accompany that text on the left. Correct me if I'm wrong, but this solution wouldn't cover what I'm trying to do-- which is completely replace the text with images.

Some background on what I'm trying to do-- I'm trying to create a dropdown for users to select line thickness on an online painting/doodling app. The images would be lines of different thickness, kind of like mspaint.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaylinshayd

Add To Favorites

Follow

Total Points: 443

Total Questions: 104

Total Answers: 111

Location: Nauru

Member since Wed, Mar 29, 2023

1 Year ago

answered 13 Years ago harleyterryp · Accepted Answer

Check this example .. everything has been done easily http://jsfiddle.net/GHzfD/

EDIT: Updated/working as of 2013, July 02: jsfiddle.net/GHzfD/357

#webmenu{

    width:340px;

}



<select name=webmenu id=webmenu>

    <option value=calendar title=http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG></option>

    <option value=shopping_cart title=http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png></option>

    <option value=cd title=http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg></option>

    <option value=email  selected=selected title=http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png></option>

    <option value=faq title=http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png></option>

    <option value=games title=http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif></option>

</select>



$(body select).msDropDown();