HTML Forms - Image Selector

I wanted to be able to select an image icon easily, like this:

This is the stylesheet and javascript:

<style type="text/css">
.icon {
height: 32px;
width:  32px;
background-repeat: no-repeat;
padding-top: 1px;
padding-bottom: 1px;
background-color: white;
}
.group {
height: 35px;
background-color: white;
}
</style>
<script language="javascript" type="text/javascript">
function doIcon( pVal ) {
var obj = document.getElementById( 'imgCombo' );
var img = '/file/imgselect/' + pVal + '.png';
obj.style.background = "url( '" + img + "' ) no-repeat";
}
</script>

And this is the actual form code:

<form>
<select class="group" style="width: 54px;" onchange="javascript: doIcon( this.value );" id="imgCombo">
<option value="xclock" class="icon" style="background-image: url('/file/imgselect/xclock.png');"> </option>
<option value="firefox" class="icon" style="background-image: url('/file/imgselect/firefox.png');"> </option>
<option value="gimp" class="icon" style="background-image: url('/file/imgselect/gimp.png');"> </option>
</select>
</form>

You can look at the example by itself here.