页面里有几个<area>标签，每个标签的id不同，现在想用ajax实习鼠标移动到某个arae区域然后从数据库中执行查询取值显示在制定区域。虽然document.getElementById(id);可以取指定的id然后作为参数之一传递到数据库查询页面，可这样只能实习一个区域的功能啊，有什么办法实现鼠标移到到哪个区域就取哪个区域的id吗，困惑。
<area id="a1" onmouseover="qq()">
<area id="a2" onmouseover="qq()">
<area id="a3" onmouseover="qq()"><script type="text/javascript">
function qq() {function $cz(id){ return document.getElementById(id);}
xmlhttp.open("get","mypage.asp?areaid="+$cz('a1').value);
}
</script>JavaScript
<area id="a1" onmouseover="qq()">
<area id="a2" onmouseover="qq()">
<area id="a3" onmouseover="qq()"><script type="text/javascript">
function qq() {function $cz(id){ return document.getElementById(id);}
xmlhttp.open("get","mypage.asp?areaid="+$cz('a1').value);
}
</script>JavaScript
<area id="a2" onmouseover="qq(this.document.getElementById(a2))">，
<area id="a3" onmouseover="qq(this.document.getElementById(a3))">，function qq(y) { xmlhttp.open("get","mypage.asp?areaid="+y.value);
}
想了想，不知道这样可以不？或者在area加个name之类的
有什么好方法没有啊，求大侠指教，
<area id="a1" onmouseover="qq(<script type="text/javascript">document.getElementById(a1))</script>">，
<area id="a2" onmouseover="qq(<script type="text/javascript">document.getElementById(a2))</script>">，
<area id="a3" onmouseover="qq(<script type="text/javascript">document.getElementById(a3))</script>">，function qq(y) { xmlhttp.open("get","mypage.asp?areaid="+y.value);
}
<area id="a1" onmouseover="qq(a1)">，
<area id="a2" onmouseover="qq(a2)">，
<area id="a3" onmouseover="qq(a3)">，
<style type="text/css">
#a1,#a2,#a3,#a4{
border:1px solid #000;
height:400px;
width:24%;
margin:5px;
float:left;
}
</style>
<script type="text/javascript">
$(function () {
$(".areaDiv").on("mouseover",function () {
alert(this.id);
});
})
</script>
<body>
<div id="a1" class="areaDiv"> </div>
<div id="a2" class="areaDiv"> </div>
<div id="a3" class="areaDiv"> </div>
<div id="a4" class="areaDiv"> </div>
</body>
也可以这样
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
.areaDiv{
border:1px solid #000;
height:400px;
width:24%;
margin:5px;
float:left;
}
</style>
<script type="text/javascript">
function qq(y) {
alert(y);
}
</script>
<body>
<div id="a1" class="areaDiv" onmouseover="qq(this.id)"> </div>
<div id="a2" class="areaDiv" onmouseover="qq(this.id)"> </div>
<div id="a3" class="areaDiv" onmouseover="qq(this.id)"> </div>
<div id="a4" class="areaDiv" onmouseover="qq(this.id)"> </div>
</body>
<area id="a1" onmouseover="qq(this.id)">