자바 스크립트 : onmouseover 기능

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

Ajax 라이브러리 (jQuery, YUI, dojo, ExtJS, ...)를 사용하는 것이 좋습니다. jQuery에서 나는 다음과 같이 할 것입니다 :

편집 :.click() 능력으로 예제를 확장했습니다.

var ignoreAttrName = 'data-ignore'; 

var imgTags = jQuery('#leftsec img'); // Select all img tags from the div with id 'leftsec' 

jQuery(imgTags) 
.attr(ignoreAttrName , 'false') // Supplying an ignore attribute to the img tag 
.on('click', function() { 
    jQuery(imgTags).attr(ignoreAttrName, 'false'); // Resetting the data tag 
    jQuery(this).attr(ignoreAttrName, 'true'); // only the current will be ignored 
    // Do whatever you want on click ... 
}) 
.on('mouseover', function() { 
    // This will be called with the img dom node as the context 
    var me = jQuery(this); 

    if (me.attr(ignoreAttrName) === 'false') { 

     me.attr('src', me.attr('id') + '.gif'); 
    } 
}) 
.on('mouseout', function() { 
    // This will be called when leaving the img node 
    var me = jQuery(this); 

    if (me.attr(ignoreAttrName) === 'false') { 
     me.attr('src', me.attr('id') + '-over.gif'); 
    } 
}); 

라이브러리를 사용하면 더 깨끗하고 확장 성이 뛰어나며 다른 브라우저에서 작동하는 가능성도 높아집니다. :).

희망이 도움이됩니다.