How to show image using onmouseover in javascript

I have lots of pets. what i want to achive is that when ever i hover, it will display the image of particular pet in nearby div.

for example

<code>
<select name="pet" id="pet">
<option value="1">Dog</option>
<option value="2">Cat</option>
<option value="3">Rat</option>
</select>

<div id="petimage"></div>
</code>

Earlier i was using onmousehover in option then with the help of ajax i was albe to get the particular pet image but now i realized onmousehover event not working in IE.

Can anyone tell me the alternative?

Thanks navi

It will be better to use hover()

Add the image to your options:

<option value="1" data-img="dog.jpg">Dog</option>

And use this code:

$('#petimage').hover(function(){

    $(this).html('<img src="'+$('#pet option:selected').data('img')+'">');

},function(){

    $(this).html('');

});

you can try this?

   <select name="pet" id="pet" onchange="document.getElementById('getdisplay').src=this.value">
<option value="dog.jpg">Dog</option>
<option value="cat.jpg">Cat</option>
<option value="rat.jpg">Rat</option>
</select>

<div id="petimage"><img src="" id="getdisplay" /></div>

use image tag and give a id as getdisplay