이미지를 클릭하면 이미지를 바꿀 수 있습니까?

여기 두 개의 이미지를 사용합니다. Sort_down.png 이미지를 한 번 클릭하면 Sort_up.png로 바뀝니다. 이 이미지를 다시 클릭하면 다시 Sort_down.png로 변경되지 않습니다. 어떻게이 작업을 수행 할 수 있습니까?이미지를 클릭하면 이미지를 바꿀 수 있습니까?

<script type="text/javascript"> 
function clkimg() { 
     var img = document.getElementById('stCodeDSC'); 
       img.src = '../Images/sort_up.png'; 

     } 
    </script> 


    <td width="11%" bgcolor="#C5DEFF" class="menu_header"> 
    <div align="center" onclick="clkimg();" > 
    <img name="stCodeDSC" class="img" src="../Images/Sort_down.png" id="stCodeDSC"> 
    </div> 
</td>

출처

2012-04-11 SHAURAJ SINGH

두 번째 클릭 이벤트에서 이미지 원본을 sort_up에서 source_down으로 변경하지 않습니다. –

예. 나는 아이디어를 얻지 못했습니다. Cn u plz tll .. –

이것은 http://stackoverflow.com/questions/10090562/how-to-swap-image-on-click – Timmerz

당신은 그것을 말하려는 것이 아닙니다. 클릭 코드에서 이미지가 위 또는 아래로 표시되는지 테스트하고 그에 따라 이미지를 변경해야합니다. 같은 뭔가 :

if(img.src === '../Images/sort_up.png') 
    img.src = '../Images/sort_down.png'; 
else 
    img.src = '../Images/sort_up.png';

일반적으로, 그러나,이 더 추가하거나 클릭에 클래스를 제거하고 CSS를 사용하여 클래스를 스타일링에 의해 처리 될 것이다.

출처

2012-04-11 05:54:21

의 복제본처럼 보입니다. 한 번만 변경됩니다. ... 다시 그것의 NT는 –

@SHAURAJSINGH에 변화한다 : 그것은 작동해야한다. 이미지가 경로에 있는지 확인하십시오. 데모 : http://jsfiddle.net/xc8Pe/ – codef0rmer

작동중인 BT 만 once.its 이미지를 아래로 변경했지만 NT는 다시 아래로 내려 .. –

사용하는 브라우저에 따라 이미지의 원본이 상대 URL로 설정된 경우이를 다시 읽으면 절대 URL이 제공됩니다. 당신이 토글을 사용하려는 경우, 당신은 예를 들어, 소스에서 문자열을 확인할 수 있습니다

function clkimg() { 
    var img = document.getElementById('stCodeDSC'), 
     nextImg = img.src.indexOf('up.png')>0 ? 'down':'up'; 
    img.src = '../Images/sort_' + nextImg + '.png'; 
}

만약 sort_up 및 sort_down 이미지가 실제로 아이콘은 그냥 나 현재 정렬 상태 아래를 확인하는 당신을 두 이미지를 하나로 결합하여 CSS를 사용하여 표시하는 스프라이트로 사용할 수 있습니다. https://stackoverflow.com/search?q=css+sprite

출처

2012-04-11 06:36:01 steveukx

이미지를 클릭하면 이미지를 바꿀 수 있습니까?

답변

관련 문제