Question

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

我已经完成了上述所有操作，但我的问题是当我选择多张图片并将鼠标放在先前选择的图像上时，这些图像不会改变（onmouseover属性不再适用于它们）。

<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>

Answer 1

我说你不需要重置onmouseover事件的行。

没有必要重写onmouseover事件 - 你想要改变的只是img src属性。

正如亚当提到的那样，使用jQuery有更现代的方法 - 看看：

http://code.google.com/p/jquery-swapimage/

例如。

onmouseover函数Javascript

1 个答案: