2012-08-08 7 views
1

나는 IMG Onmouseout, 여기에 onMouseover와는, 내 페이지에 대한 메뉴가은 onMouseover와, onmouseout, onclick을 기능 자바 스크립트

내가 이미지를 변경해야합니다 이미지를 통해 내 마우스를 넣을 때마다
<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는 ,,이 솔루션을

답변

2

가 여기에 하나 개의 순수 자바 스크립트 솔루션입니다 사전에

덕분에 나를 도와,이 도움이 될 수 있음

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

요기 -> 작동하지 않습니다. 요소 ID가 작동하지 않습니다. if (imgs [i]! = 보낸 사람) alert ('123') imgs [i] .src = '이미지/MenuInWhite/HomeButton1.png'; – Zeeju

+0

yogi -> yea 나는 내 페이지에 onclick과 위의 javascript를 추가했고 시도했지만, 변경되지 않았습니다 ,,,,, – Zeeju

+0

@ShaiRiyaz는 이제 그것을 실제로 보았습니다. onmouseout 핸들러를 제거하지 않았습니다. 클릭 한 후 마우스가 그 img에서 바깥으로 바뀌면 정상적으로 바보 같은 실수로 바뀝니다 :) – yogi