1

私のページのメニューがあります。これが 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 />

マウスを画像の上に置くたびに画像が変更され、マウスを離すと元の画像に変更される必要があります。正常に動作しています。

画像を選択するたびに、その画像を、マウスを画像上で動かしているときに表示された画像に変更する必要がある方法を知りたいです。他の画像を選択すると、同じプロセスを実行する必要がありますが、変更された前の画像を元の画像に戻す必要があります。

plsはこの解決のために私を助けてください、、

前もって感謝します

4

1 に答える 1

2

これがそのための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>
于 2012-08-08T07:25:37.577 に答える