So here's my code:

Code:

<script language="javascript">
<!--
function WriteText(county)
{
	var t = 15;
	for (i = 1; i <= t; i++) { 
		if (county == ("county"+i) ) {  //figures out which county they clicked on
		document.getElementById(county).style.display="block";
		}
	    else { //if it's not the county they clicked on, it sets its display back to 'none'
		document.getElementById("county" + i).style.display="none";
		}
	}

   document.getElementById("default").style.display="none";
}
// -->
</script>



<div style="width:530px;margin-left:10px;" id="map"> 
  <img src="map-bg.gif" alt="Map" border="0" usemap="#map" style="margin-top:20px;"><br>
  <map name="map">
    <area shape="poly" onClick="WriteText('county1')" alt="" coords="298,182,192,182,195,201,195,211,198,221,237,220,253,219,263,221,269,220,315,219,314,203,314,182" href="#">
   <!-- cut this stuff out to clean up the code -->
    <area shape="poly"  onClick="WriteText('county15')" alt="" coords="83,181,83,163,84,144,111,144,111,117,105,115,105,108,142,107,143,116,146,117,147,131,147,144,155,145,165,145,165,182,192,183,195,209,197,219,160,220,133,219,132,210,129,210,128,182" href="#">
  </MAP>
 </div>

 <!-- Office Information containment div -->
  <div style="width:400px;">
    <div id="default" style="display:block;">
      <p>Please click your county below to find the nearest office</p>
    </div>
    <div id="county1" style="display:none;">
      
    </div>
    <div id="county2" style="display:none;">
      
    </div>
    <div id="county3" style="display:none;">
      
    </div>
    <div id="county4" style="display:none;">
      
    </div>
    <div id="county5" style="display:none;">
      
    </div>
    <div id="county6" style="display:none;">
    
    </div>
    <div id="county7" style="display:none;">
      
    </div>
    <div id="county8" style="display:none;">
      
    </div>
    <div id="county9" style="display:none;">
      
    </div>
    <div id="county10" style="display:none;">
     
    </div>
    <div id="county11" style="display:none;">
     
    </div>
    <div id="county12" style="display:none;">
     
    </div>
    <div id="county13" style="display:none;">
      
    </div>
    <div id="county14" style="display:none;">
     
    </div>
    <div id="county15" style="display:none;">
    
    </div>
  </div>

  <div>
    <form action="" method="get">
	  <select name="offices">
	                        <option selected>Select a County</option>
                            <option  onClick="WriteText('county14')">Test1 
                            County</option>
                            <option  onClick="WriteText('county14')">Test2
                            County</option>
                            <option onClick="WriteText('county6')">Test3 
                            County</option>
                            <option onClick="WriteText('county9')">Test4
                            County</option>
                            <option onClick="WriteText('county15')">Test5 
                            County</option>

        
	  </select>
	</form> 
  </div>
It works great in firefox; exactly as it should. However, nothing happens in IE when you click the drop down box. the image map is fine.