Question

我的页面有一个菜单，这里是Onmouseover，Onmouseout img

<img id='wits' class="wits1" src="Images/MenuInWhite/ContactButton1.png" onmouseover="this.src='Images/mouseover/ContactButton2.png'"
        onmouseout="this.src='Images/MenuInWhite/ContactButton1.png'"  /><br />
    <img id='city' class="city1" src="Images/MenuInWhite/ActivitiesButton1.png" onmouseover="this.src='Images/mouseover/ActivitiesButton2.png'"
        onmouseout="this.src='Images/MenuInWhite/ActivitiesButton1.png'" /><br />
    <img id='organise' class="city1" onmouseout="this.src='Images/MenuInWhite/CruisesButton1.png';"
        onmouseover="this.src='Images/mouseover/CruisesButton2.png';" src="Images/MenuInWhite/CruisesButton1.png" /><br />
    <img id='people' class="city1" onmouseout="this.src='Images/MenuInWhite/HomeButton1.png';"
        onmouseover="this.src='Images/mouseover/HomeButton2.png';" src="Images/MenuInWhite/HomeButton1.png" /><br />

每当我将鼠标放在图像上时，图像必须改变，当我将鼠标移开时，必须将其更改为原始图片，它工作正常，

我想知道每当我选择任何图像时该怎么做，该图像必须更改为在图像上移动鼠标时显示的图像。当我选择任何其他图像时，必须进行相同的处理，但必须将之前更改的图像更改回原始图像。

请帮我解决这个问题，

提前致谢

Answer 1

这是一个纯粹的JavaScript解决方案，可能会有所帮助

function isMSIE() 
{
   var ie7 = 
   (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
   return ie7;
}
function getParent(element, depth) 
{
   var rVal = element;
   if (isMSIE()) {
       for (i = 0; i < depth; i++)
       rVal = rVal.parentElement;
   }
   else {
        for (i = 0; i < depth; i++)
        rVal = rVal.parentNode;
    }
    return rVal;
}
function clicked(sender)
{
    var parent   = getParent(sender, 1);
    var imgs = parent.getElementsByTagName("IMG");
    for(i=0; i<imgs.length; i++)
    {
       if (imgs[i] != sender) {
          imgs[i].src = 'Images/MenuInWhite/ContactButton1.png';
          imgs[i].onmouseout = 
            function () { this.src = 'Images/MenuInWhite/HomeButton1.png'; };
       }
       else {
          imgs[i].src = 'Images/MenuInWhite/HomeButton1.png';
          imgs[i].onmouseout = null;
       }
        if(imgs[i]!=sender)
          imgs[i].src = 'Images/MenuInWhite/HomeButton1.png';
    }
}

<div>
   <img id='wits' class="wits1" 
      src="Images/MenuInWhite/ContactButton1.png"    
      onmouseover="this.src='Images/mouseover/ContactButton2.png'"
      onmouseout="this.src='Images/MenuInWhite/ContactButton1.png'"
      onclick="clicked(this);"  /><br />
   // Just add this onclick="clicked(this);" on each img
</div>

onmouseover，onmouseout，onclick函数Javascript

1 个答案: