Image as a drop-down menu

[colindunn]

Hey everyone,

Does anyone know how to use an image in place of a standard drop-down menu like Apple does on their web site http://www.apple.com? The example I am talking about it at the bottom where you can choose which country you are from. I took a look at the code and could not figure it out myself.

Thanks for any help.

[_Aerospace_Eng_]

This is what they are doing. They first set the opacity of the select to 0
#worldwide form#worldwidelinks { padding: 2px 0 0; float: left; width: 196px; height: 19px; margin: 0 0 50px 8px; background: #000 url(http://images.apple.com/home/elements/worldwide.png) no-repeat 0 100%; color: #fff; }
#worldwide form#worldwidelinks select { width: 196px; margin-top: -2px; opacity: 0; }
<div id="worldwide">

<img src="http://images.apple.com/home/elements/worldwide_us.png" alt="US" border="0" height="22" width="22" class="left">
<form id="worldwidelinks" method="post" action="http://www.apple.com/cgi-bin/nph-menu">
<select name="worldwide" onchange="location.href=this.form.worldwide.options[this.form.worldwide.selectedIndex].value">
<option selected value="">Apple.com Worldwide</option>
<option value="http://www.asia.apple.com/">Asia</option>
<option value="http://www.apple.com.au/">Australia</option>
<option value="/at/">Austria</option>

<option value="/be/">Belgium</option>
<option value="/br/">Brazil</option>
<option value="/ca/">Canada</option>
<option value="http://www.apple.com.cn/">China</option>
<option value="/dk/">Denmark</option>
<option value="/euro/">Europe</option>

<option value="/fi/">Finland</option>
<option value="/fr/">France</option>
<option value="/de/">Germany</option>
<option value="http://appleclub.com.hk/">Hong Kong</option>
<option value="http://www.apple.co.in/">India</option>
<option value="/ie/">Ireland</option>

<option value="http://www.apple.it/">Italy</option>
<option value="/jp/">Japan</option>
<option value="http://www.applecomputer.co.kr/">Korea</option>
<option value="/la/">Latin America</option>
<option value="/mx/">Mexico</option>
<option value="/nl/">Netherlands</option>

<option value="/nz/">New Zealand</option>
<option value="/no/">Norway</option>
<option value="/singapore/">Singapore</option>
<option value="/sa/">South Africa</option>
<option value="/es/">Spain</option>
<option value="/se/">Sweden</option>

<option value="/ch/">Switzerland</option>
<option value="http://www.apple.com.tw/">Taiwan</option>
<option value="/uk/">UK</option>
<option value="http://www.apple.com/">United States</option>
</select>
</form>
</div>

Then onclick of the worldwide div they change the opacity of the select menu to 100.

[colindunn]

So the image is behind the drop down? How does the image stay visible even when the opacity of the drop down opacity changes back to 100?

[bazz]

I think the image is there all the time but is effectively, transparent until you click on it. The original image doesn;t seem to move. (viewed in FF)

bazz