onmouseover 및 onmouseout을 사용하여 자바 스크립트 onclick

Question

몇 가지 자바 스크립트 호출이있는 이미지가 있는데, 대부분은 정상적으로 작동합니다.

기본적으로 내가하고 싶은 것은 스왑 이미지를 클릭 한 다음 현재 이미지에 따라 마우스 오버시 스왑을하는 것입니다.

이 버튼을 두 번째로 클릭하는 경우를 제외하고 잘 작동

function changeImage() { 
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") { 
     document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg"; 
    } else { 
     document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg"; 
    } 
} 

function checkMouseOver() { 
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") { 
     document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow-over.jpg"; 
    } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow.jpg") { 
     document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow-over.jpg";  
    } 
} 

function checkMouseOut() { 
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow-over.jpg") { 
     document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg"; 
    } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow-over.jpg") { 
     document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg"; 
    } 
} 

, 이미지가 다시 복귀하지 않습니다

<a href="#show" class="show_hide"> 
<img src="<?php echo WEB_URL; ?>/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" onclick="changeImage()" onMouseOver="checkMouseOver()" onMouseOut="checkMouseOut()" /></a> 

그리고 내 자바 스크립트 : 여기

내 HTML의 당신이 JS를 할 수

Answer 1

도와 쇼 - 덜 arrow.jpg

많은 감사 훨씬 더 효율적입니다.

을 'less'으로 바꾸고 그 반대의 경우는 changeImage 함수에서 함수가 수행해야하는 작업과 동일합니다. 마우스 오버/오프는 문자열의 '-over' 섹션 만 토글합니다. 이 자바 스크립트를

<a href="#show" class="show_hide"> 
    <img src="<?php echo WEB_URL; ?>/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" /> 
</a> 

를 사용 :

그래서, 당신의 HTML에서 이벤트 리스너를 제거

var img = document.getElementById("clicktoggleimage"); 

function changeImage() { 
    if (img.src.indexOf('less') == -1) { 
     img.src = img.src.replace('more', 'less'); 
    } else { 
     img.src = img.src.replace('less', 'more'); 
    } 
} 

function hoverImage() { 
    if (img.src.indexOf('arrow-over') == -1) { 
     img.src = img.src.replace('arrow', 'arrow-over'); 
    } else { 
     img.src = img.src.replace('arrow-over', 'arrow'); 
    } 
} 

img.onclick = cangeImage; 
img.onmouseover = img.onmouseout = hoverImage;