Javascript:onmouseover函数

Javascript:onmouseover函数,javascript,html,onmouseover,onmouseout,Javascript,Html,Onmouseover,Onmouseout,我在动态图片上更改onmouseover和onmouseout属性时遇到问题。我希望它的工作方式是,每当我把鼠标放在图像上时,图像必须改变,当我把鼠标拿开时,图像必须改变为原始图像。每当我选择任何图像时,该图像必须更改为在图像上移动鼠标时显示的图像。当我选择任何其他图像时,必须进行相同的处理,但必须将之前更改的图像更改回原始图像 我已经完成了以上所有操作,但我的问题是,当我选择多张图片并将鼠标放在先前选择的图片上时,这些图片不会更改,而MouseOver属性不再对它们起作用 <script

我在动态图片上更改onmouseover和onmouseout属性时遇到问题。我希望它的工作方式是,每当我把鼠标放在图像上时,图像必须改变,当我把鼠标拿开时,图像必须改变为原始图像。每当我选择任何图像时,该图像必须更改为在图像上移动鼠标时显示的图像。当我选择任何其他图像时,必须进行相同的处理,但必须将之前更改的图像更改回原始图像

我已经完成了以上所有操作,但我的问题是,当我选择多张图片并将鼠标放在先前选择的图片上时,这些图片不会更改,而MouseOver属性不再对它们起作用

<script language="javascript">
    function changeleft(loca){
        var od=''
        var imgs = document.getElementById("leftsec").getElementsByTagName("img"); 
        for (var i = 0, l = imgs.length; i < l; i++) {  
            od=imgs[i].id;

            if(od==loca){
                imgs[i].src="images/"+od+"_over.gif";
                imgs[i].onmouseover="";
                imgs[i].onmouseout="";
            }else{
                od = imgs[i].id;
                imgs[i].src="images/"+od+".gif";
                this.onmouseover = function (){this.src="images/"+od+"_over.gif";};
                    this.onmouseout = function (){this.src="images/"+od+".gif";};
            }

        }
    }
</script>

<div class="leftsec" id="leftsec" >
    <img id='wits' class="wits1"  src="images/wits.gif" onmouseover="this.src='images/wits_over.gif'" onmouseout="this.src='images/wits.gif'" onclick="changeleft(this.id)" /><br />

    <img id='city' class="city1" src="images/city.gif" onmouseover="this.src='images/city_over.gif'" onmouseout="this.src='images/city.gif'" onclick="changeleft(this.id)" /><br />

    <img id='organise' class="city1" src="images/organise.gif" onmouseover="this.src='images/organise_over.gif'" onmouseout="this.src='images/organise.gif'" onclick="changeleft(this.id)" /><br />

    <img id='people' class="city1" src="images/people.gif" onmouseover="this.src='images/people_over.gif'" onmouseout="this.src='images/people.gif'" onclick="changeleft(this.id)" /><br />
</div>

我建议使用Ajax库jQuery、YUI、dojo、ExtJS等等。。。。在jQuery中,我将执行以下操作:

编辑:使用扩展示例。单击“能力”

var ignoreAttrName='data ignore'; var imgTags=jQuery'leftsec img';//从id为“leftsec”的div中选择所有img标记 jQueryimgTags .attrignoreAttrName,“false”//为img标记提供忽略属性 .点击,功能{ jQueryimgTags.attrignoreAttrName,“false”;//重置数据标记 jQuerythis.attrignoreAttrName,“true”;//只有当前值将被忽略 //点击后做任何你想做的事。。。 } .on'mouseover',函数{ //这将使用imgdom节点作为上下文调用 var me=jQuerythis; 如果me.attrignoreAttrName=='false'{ me.attr'src',me.attr'id'+'.gif'; } } .on'mouseout',函数{ //离开img节点时,将调用此函数 var me=jQuerythis; 如果me.attrignoreAttrName=='false'{ me.attr'src',me.attr'id'+'-over.gif'; } }; 有了一个库,我认为它更干净、更具可伸缩性,而且它在其他浏览器中工作的可能性也增加了:


希望这对你有帮助

不完全是我想要的,因为我说我已经完成了那部分。不同的是,像这样的一个片段除了可以解决你的问题外,还可以解决你的问题:-它应该永远有效,我如何完成onclick部分,其中onmouseover和onmouseout必须禁用,直到选中图像?我编辑了代码,以某种方式,它应该可以让当前单击的项目忽略其mouseover和mouseout事件。