[Max A.K.]

Задача: есть выпадающий список, нужно что бы при навигации по элементам списка менялась картинка расположенная рядом со списком.

Написал такой код:

<script language="javascript" type="text/javascript" src="./js/flags.js"></script>

<center style="position:relative; left:-30px;">
	<div id="flags" style="background:white url([url]http://localhost/flag_am.gif[/url]) no-repeat; width:30px; height:15px;">
	</div>
</center>

<div style="text-align:center; position:relative; top:-18px; left:50px;">
	<select id="sel">
		<option selected value="0">Азербайджан</option>
                <option value="1">Армения</option>
		<option value="2">Беларусь</option>		
	</select>
</div>

flags.js такой:

var m_ImgArray = new Array();
m_ImgArray[0] = 'http://localhost/flag_am.gif';
m_ImgArray[1] = 'http://localhost/flag_az.gif';
m_ImgArray[2] = 'http://localhost/flag_by.gif';


var g_Selected = -1;
setTimeout("OnChange()", 300);

function OnChange()
{
    var selObj = document.getElementById("sel");
        
    if (g_Selected != selObj.value)
    {
        g_Selected = selObj.value;	
		
		$('flags').style.background = 'white url('+ m_ImgArray[g_Selected] +') no-repeat ';
		//	For IE lt 7.0 small hack
		if (Object.isString($('flags').style.behavior))
		{
	        $('flags').runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + m_ImgArray[g_Selected] + "', sizingMethod='crop')",
	        $('flags').runtimeStyle.backgroundImage = "none";
		}			
    }

    setTimeout("OnChange()", 300);    
}

В FF все работает на ура, а вот в IE не работает, так как value не меняет значение до тех пор пока я не кликну на выбранном элементе списка. Как решить проблему?