Change a image when list box selected item is changed

I have a list box with id of 'availmap' containing filename of images the path is maps/image.jpg

I also have a image control with id of 'map' that I would like to change to the selected image using the onclick event of the list box

this is the js I have tried and can not figure out why it won't work

<script type="text/javascript">
   function ChgImg() {
    var list = document.getElementById('availmap');
    var indx = list.selectedIndex;
    var img = list[indx].value;
    var id = document.getElementById('map');
    id.src="maps/" + img;

}

This is the image tag and the listbox code

<div id='avail' style='position:fixed;left:500px;top:0;z-index:0;text-align:center;bgcolor='#00b0e6';>
<span style='position:fixed;left:540px;top:30px;width:250px;font-family:Arial;font-size:15px;background-color:#00b0e6;border: 1px #000000 solid;'>Availible Maps</span>  </div>
<form action='jobs.php' target='joblist' style='position:fixed;left:500px;top:101px;'></td>

<select id='availmap' name='availmap' size='10' style='width: 250px;position:fixed;left:540px;top:51px;' onchange='ChgImg()'>
EOY;
while($row = mysqli_fetch_array($mapresult))
{ 
 echo "<option value=\"".$row['ID']."\">".$row['AssocMap']."</option>\n  ";
}

echo "</select>";

echo "</form>";

echo "<img id='map' src='' alt='' style='position:absolute;left:800px;top:30px;width:260px;height:185px;border: 1px #000000 solid;'>";

I'm sure it is something relatively simple I am missing here