<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#touxiang{ margin:150px auto; width:300px; height:300px; border:1px solid #666;}
#touxiang img{width:100%; height:100%;}
</style>
<script type="text/javascript">
function hidden(){
var imgs=document.getElementById("touxiang").getElementsByTagName("img");
imgs[0].style.display="";
for(var i=1;i<imgs.length;i++){
imgs[i].style.display="none";
}
}
function startqiehuan(){
document.onmousemove=qiehuan;
document.getElementById("touxiang").onmouseover=hidden;
}
function qiehuan(){
var x=window.event.clientX;
var y=window.event.clientY;
var girl=document.getElementById("girl");
girl.style.left=x+"px";
girl.style.top=y+"px";
var touxiang=document.getElementById("touxiang");
var imgs=touxiang.getElementsByTagName("img");
if(0<x&&x<touxiang.offsetLeft&&0<y&&y<touxiang.offsetTop){
for(var i=0;i<imgs.length-2;i++){//左上
imgs[i].style.display="none";
}
imgs[8].style.display="";
imgs[9].style.display="none";
}
if(x>touxiang.offsetLeft&&x<touxiang.offsetLeft+touxiang.offsetWidth&&y<touxiang.offsetTop){//上
imgs[0].style.display="none";
imgs[1].style.display="";
for(i=2;i<imgs.length;i++){
imgs[i].style.display="none";
}
}
if(x>touxiang.offsetLeft+touxiang.offsetWidth&&y>0&&y<touxiang.offsetTop){
for(var i=0;i<2;i++){//右上
imgs[i].style.display="none";
}
imgs[2].style.display="";
for(i=3;i<imgs.length;i++){
imgs[i].style.display="none";
}
}
if(x>touxiang.offsetLeft+touxiang.offsetWidth&&y<touxiang.offsetTop+touxiang.offsetHeight&&y>touxiang.offsetTop){//右中
for(var i=0;i<3;i++){
imgs[i].style.display="none";
}
imgs[3].style.display="";
for(i=4;i<imgs.length;i++){
imgs[i].style.display="none";
}
}
if(x>touxiang.offsetLeft+touxiang.offsetWidth&&y>touxiang.offsetTop+touxiang.offsetHeight){//右下
for(var i=0;i<4;i++){
imgs[i].style.display="none";
}
imgs[4].style.display="";
for(i=5;i<imgs.length;i++){
imgs[i].style.display="none";
}
}
if(x>touxiang.offsetLeft&&x<touxiang.offsetLeft+touxiang.offsetWidth&&y>touxiang.offsetTop+touxiang.offsetHeight){//下
for(var i=0;i<5;i++){
imgs[i].style.display="none";
}
imgs[5].style.display="";
for(i=6;i<imgs.length;i++){
imgs[i].style.display="none";
}
}
if(x<touxiang.offsetLeft&&x>0&&y>touxiang.offsetTop+touxiang.offsetHeight){//左下
for(var i=0;i<6;i++){
imgs[i].style.display="none";
}
imgs[6].style.display="";
for(i=7;i<imgs.length;i++){
imgs[i].style.display="none";
}
}
if(x<touxiang.offsetLeft&&x>0&&y<touxiang.offsetTop+touxiang.offsetHeight&&y>touxiang.offsetTop){//左中
for(var i=0;i<7;i++){
imgs[i].style.display="none";
}
imgs[7].style.display="";
imgs[8].style.display="none";
}
}
function wo(){
var imgs=document.getElementById("touxiang").getElementsByTagName("img");
imgs[0].mousedown=beidian;
imgs[0].mouseup=hidden;
}
function beidian(){
alert("sdf");
var imgs=document.getElementById("touxiang").getElementsByTagName("img");
for(var i=0;i<imgs.length-1;i++){
imgs[i].style.display="none";
}
imgs[imgs.length-1].style.display="";
}
</script>
</head><body style="background-color:#CCC;" onload="hidden(); startqiehuan();wo()">
<div id="touxiang">
<img src="普通.jpg"/>
<img src="上.jpg" />
<img src="右上.jpg" />
<img src="右中.jpg" />
<img src="右下.jpg" />
<img src="下.jpg" />
<img src="左下.jpg" />
<img src="左中.jpg" />
<img src="左上.jpg" />
<img src="被点.jpg"/>
</div>
<img src="飞机.png" style="height:40px; position:absolute; left:0px; top:0px;" id="girl"/>
</body>
</html>
贴子红色的代码不能够被调用。很奇怪?我明明为imgs[0]注册了onmousedown和onmouseup事件但是却得不到相应函数beidian()的响应,而hidden函数却得到了响应。在beidian()函数中,用来测试的alert("sdf")弹窗根本就没有跳出来。很费解!不哟啊说让我把beidian()放在前面,我试过了,不管用!请求高手帮忙!

解决方案 »

  1.   

    imgs[0].mousedown=beidian;
    改为imgs[0].mousedown=beidian();试试
      

  2.   

    还是不可以啊!问题是hidden并未加“()”,却得到了执行,而beidian并未执行!这是问题所在!可以复制一下这个代码!它是可以执行的(除了图片没有),再好好观察一下!我很费解
      

  3.   

    <body style="background-color:#CCC;" onload="hidden(); startqiehuan();wo()">
    onload="hidden(); 是在这里执行的
    你imgs[0].mousedown=beidian();这是不是alert执行了
      

  4.   

    伙计,我试了一下,onload中确实是调用了hidden,但是当页面加载完毕后就执行了那一次!后面调用hidden函数的是function startqiehuan(){
     document.onmousemove=qiehuan;
     document.getElementById("touxiang").onmouseover=hidden;
    }
    中的onmouseover事件发生的结果。在这里hidden并没有加上“()”,依然得到了响应!

    function wo(){
    var imgs=document.getElementById("touxiang").getElementsByTagName("img"); 
    imgs[0].mousedown=beidian;
    imgs[0].mouseup=hidden;
    }
    中的hidden函数却并未的得到响应!伙计,你试过之后再做回答,不要想当然!没有“()”是说明,这个函数就是这个事件的响应函数而已!加上“()”是说明在这个事件中调用了这个函数!