javascript代码：移动到图片热区上显示边框函数未正确调用，问题出在哪里？

Question

http://www.501h.com/article_book.asp?articleid=2360
这个页面，效果是鼠标移动到报纸上的热区的时候，相应的热区出现一个红色的边框。
这个页面是之前别人写的函数调用，是好使的，因为这个报纸是公司负责经常更新的，这样的话，更新的时候除了要在dw中画出图片热区外，还要在源代码中修改函数调用参数，我嫌麻烦，也实在看不惯行间js，于是试着修改了下js代码：http://www.501h.com/Article_Book_new.asp?articleid=2368 但却没有达到预期的效果， firebug也没有错误提示，请教错误原因。
（您如果是一名web前端工程师，一定很想吐槽页面代码是有多么的烂，但这是一个三线城市的好多年前的页面，也不是我做的，所以，请把问题关注点放在这个问题上(*∩_∩*)）javascript热区

Answer 1

既然热点有coords，就根据这个坐标 尺寸来判断或者参见http://bbs.csdn.net/topics/390088099

Answer 2

你贴的链接我看了，函数写的也太复杂了，您能帮我看看我的代码的bug出在什么地方吗？

Answer 3

恩呢  反正效果不对的呢？能帮我看看我的bug在哪吗？

Answer 4

我看可能是你循环里的问题，我也一直在学习，用jQuery优化了一下，发给你参考一下。<style type="text/css">
.addClass{
    Z-INDEX: 100;
    CURSOR: hand; 
    POSITION: absolute;
border:solid 2px #FF0000;
display: block;
}
</style>
<script type="text/javascript">
$(function(){
var areas = document.getElementsByTagName("area");
for(var i=0;i<areas.length;i++){
(function(){
var temp=i;
var aCoords = areas[temp].getAttribute("coords").split(",");
areas[temp].onmouseover=function(){
show_border(aCoords[0],aCoords[1],aCoords[2],aCoords[3]);
};
areas[temp].onmouseout=function(){
close_border();
};
})();
}
});function show_border(x1,y1,x2,y2) {
var divElm = document.getElementById("leveldiv");
divElm.className="addClass";
divElm.style.left =(2+x1)+"px";
divElm.style.top =y1+"px";
divElm.style.width =(x2-x1)+"px";
divElm.style.height =(y2-y1)+"px";
}
function close_border() {
$("#leveldiv").removeClass("addClass");
}</script>
<SPAN id=leveldiv  class="addClass"></SPAN>

Answer 5

js代码是这样的：<script type="text/javascript">
window.onload = function () {  
var areas = document.getElementsByTagName("area");
for (var i = 0; i < areas.length; i++){
(function(){
var temp=i;
var aCoords = areas[temp].getAttribute("coords").split(",");
areas[temp].onmouseover=function(){
show_border(aCoords[0],aCoords[1],aCoords[2],aCoords[3]);
};
areas[temp].onmouseout=function(){
close_border();
};
})();
}
function show_border(x1,y1,x2,y2) {
var divElm = document.getElementById("leveldiv");
divElm.style.border = "solid 2px #FF0000";//边框属性
divElm.style.left =x1;
divElm.style.top =y1;
divElm.style.width = x2 - x1;
divElm.style.height = y2 - y1;
divElm.style.cursor = "pointer";
}
function close_border() {
var divElm = document.getElementById("leveldiv");
divElm.style.left = -1000;
}
};
</script>

Answer 6

图片收藏网站常用的鼠标移动图片热区：
http://www.hellbear.com/picturerecord/index.htmlhttp://www.hellbear.com/picturerecord/index.html