学习传智javascript的DOM做的练习，onclick不成功！

看传智播客的DOM教程，里面有一个KevinButton的练习，最终效果如：http://net.itcast.cn/casedemo/domjquery/jqueryDemo/KevinButton.aspx自己用javascript做了同样的效果，可是不知道为什么最终效果中的点鼻子变化的那个效果，老是做不出来，onclick加在什么地方都没有反应，在debugbar中，看到onclick是加上了的！！特向高手请教。http://www.ai3c.com/HTML.rar 这是我写的源码下载，包括变化的图片。麻烦高手指教，为什么Onclick无反应。同时应该怎么解决，出现点击鼻子变化图片的效果！

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>KevinButton 人物地图</title>
        <script type="text/javascript">
            function mapmain(){
                var map=document.getElementById("faceMap");
                var areas=map.getElementsByTagName("area");
                for (var i=0;i<areas.length;i++){
                    areas[i].onmouseover =swithpic;
                }
    var middle=document.getElementById("areaMiddle");
    middle.onclick=function(){
    var img=document.getElementById("imgFace");
    if(img.src.indexOf("middle") != -1){
    img.src="images2/pressed.jpg";
    }else{
    img.src="images2/middle.jpg";
    }
    };
            }
    function swithpic(){
                var map=document.getElementById("faceMap");
                var areas=map.getElementsByTagName("area");
                var showpic=document.getElementById("imgFace");
                showpic.src="images2/"+this.getAttribute("imgsrc");
            }
    </script>
    </head>
    <body onload="mapmain()">
    <img src="images2/normal.jpg" id="imgFace" usemap="#faceMap" width="300" height="300"/>
    <map id="faceMap">
        <area shape="rect" coords="0,0,100,100" imgsrc="upleft.jpg" />
        <area shape="rect" coords="100,0,200,100" imgsrc="up.jpg" />
        <area shape="rect" coords="200,0,300,100" imgsrc="upright.jpg" />
        <area shape="rect" coords="0,100,100,200" imgsrc="left.jpg" />
        <area shape="rect" id="areaMiddle" coords="100,100,200,200" imgsrc="middle.jpg" />
        <area shape="rect" coords="200,100,300,200" imgsrc="right.jpg" />
        <area shape="rect" coords="0,200,100,300" imgsrc="downleft.jpg" />
        <area shape="rect" coords="100,200,200,300" imgsrc="down.jpg" />
        <area shape="rect" coords="200,200,300,300" imgsrc="downright.jpg" />
    </map>
    <p>
    用鼠标在图片的上下左右等各个方向移动，图片中人的眼睛就会跟着你的鼠标走，还可以<font color="Red">用鼠标点一下他的鼻子，会有惊喜哟</font>！图片资源来自于Kevin的WPF作品《Wpf.BagOTricksApp》。</p>
        <p>
            &nbsp;</p>
        <p>
    &nbsp;<img alt="图片地图设计图" src="images2/zuobiao.jpg" style="border: thin solid #000000" /></p>
    </body>
    </html>
      

  2.   


    konghulu的代码可以成功实现，能问下，我的不能实现，问题是出在什么地方吗？为什么我不获得areaMiddle，直接onclick不行呢？按我原来的方式，用debugbar看到onclick是在代码里可以看到，却不能实现，这是为什么呢？