I am looking to build a drop down menu showing around 90 items. These items will be the names of cities. This is very easy to accomplish;
<select>
<option>City1</option>
<option>City2</option>
<option>…etc…</option>
<option>City90</option>
</select>
However, I am looking for a way to have a picture showing next to the list, corresponding to the selected option. I can not find any tutorial on this.
Any tips to get me started? Can this be accomplished using HTML/CSS only, or will there be a need for some PHP? Your help is appreciated, thanks!
Not sure what you mean.
IN the list of options, a picture of each city?
A picture of a city appears next to the select button after someone has selected a city?
If you mean the latter, you will likely need Javascript, because a form naturally does not respond to use choices until after they hit “submit”. However I seem to recall a setup someone did where an image was associated with options and they made one image appear in a particular part of the screen as the user hovered over each option… something like what meyer has here:
http://meyerweb.com/eric/css/edge/popups/demo2.html
However form controls are more browser-controlled than regular page elements. I’m not sure how well a technique like that would work cross-browser.
Hey Stomme Poes,
Thanks for your feedback! No, I don’t mean inside the list itself, it is the second option that I am looking for.
The example is not really what I was looking for though. I can understand the need for Javascript in this case. Is PHP not possible either? Or might there be a way to create a drop-down menu without the “form” controls?
You could style a regular dropdown list as a <select> dropdown, however regularly, with <select> and <option>'s it would not be possible since styling them isn’t really easy (nor was it meant to be styled)
Here is an exmample of a dropdown, based off [url=http://www.ryanreese.net/articles/suckerfish.php]this article. 