在线求牛哥指点area的样式问题

我想改变局的的热点样式 可得不到效果 在线求牛哥指点
我的代码如下：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
       .smallmap{
              background-color:#CCC;
              border:#F00 1px solid;
       }
</style>
<script type="text/javascript">
function mouseoverClick() { 
       document.getElementById("smallmap").className="smallmap"
}
</script>
</head><body style="margin:0 auto">
<div>
      <img src="images/cy/1.gif" border="0" usemap="#Map"/>
      <map name="Map" id="Map">
      <area shape="rect" id="smallmap" coords="17,18,97,165" href="#" onmouseover="mouseoverClick()" />
      <area shape="rect" coords="161,18,205,94" href="#"/>
      <area shape="rect" coords="210,91,238,115" href="#" />
      </map>
</div>
</body>
</html>