I'm trying to make a dropdown font selector using javascript. I want it to look like the ones in graphics programs where the dropdown has a sample of each font instead of just the name. So basically what I'm trying to do is put images in my select options instead of just words. I can't get that to work so I have made a layer containing my images which I can use as a fake dropdown. That's all good.

The problem is I want to have an actual select field at the top of my dropdown so that it won't look out of place in different browsers. When users click on the select it should blur, and instead of dropping down, should show my hidden layer instead. Trouble is it only seems to work in Firefox.

Here's a link to the page so you'll see what I mean. (It takes a while to load and doesn't do anything yet, I'm just trying to fix this problem at the moment).

This is the bare bones of it:
HTML Code:
<div id='fontInputWrapper'>
    <select name='fontInput' id='fontInput' size='1' onFocus="javascript:this.blur();toggleDisplay('fontSelector','block',false);" /> 
        <option value=''>$fontName</option> 
<div id='fontSelector'>
  *font images in here*
In IE the blur() doesn't do anything. I've tried window.focus() as well as this.blur() and it's better, but the options still drop down before disappearing. I've also tried onMouseDown instead of onFocus but IE doesn't seem to tie the mouseDown event to the select tag and instead activates whenever the mouse is clicked anywhere on the screen.

I've tried putting the select field in a layer with height:20px and overflow:hidden but the options still come up over the top. Same with z-index.

If anybody has any other ideas about how to do this I will try whatever you can suggest...