的onmouseover，的onmouseout，的onclick功能的Javascript

我有我的頁面菜單，這裏是的onmouseover，的onmouseout IMG的onmouseover，的onmouseout，的onclick功能的Javascript

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

每當我把我的鼠標在圖像上的圖像必須改變，當我把我的鼠標離開它必須更改爲原始圖片，它的工作正常,,

我想知道如何做，只要我選擇任何圖像，該圖像必須更改爲顯示圖像時，移動鼠標穿過圖片。當我選擇任何其他圖像時，必須進行相同的過程，但之前更改的圖像必須更改回原始圖片。

請幫我出這個解決方案,,

在此先感謝

來源

2012-08-08 Zeeju

下面是一個純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-08 07:25:37 yogi

瑜珈 - >它不起作用，元素ID在這裏不起作用 if（imgs [i]！= sender）alert（'123'） imgs [i] .src ='圖片/ MenuInWhite/HomeButton1.png'; – Zeeju 2012-08-08 07:46:16

yogi - >是啊我已經添加onclick和上面的JavaScript在我的網頁，並試過,,它不會改變,,,,, – Zeeju 2012-08-08 08:02:27

@ShaiRiyaz看看它現在它的工作實際上我沒有刪除該onmouseout處理程序和點擊鼠標後，從該img它變回正常，愚蠢的錯誤:) – yogi 2012-08-08 08:24:13

的onmouseover，的onmouseout，的onclick功能的Javascript

回答

相關問題