CSS에서 img src를 동적으로 변경할 수 있습니까?

Question

나는 2 개의 이미지가 theImg_enabled.gif과 theImg_disabled.gif라고합니다. img src을 동적으로 변경해야합니다. CSS로 어떻게 할 수 있습니까?

<img class="changeImg" src="theImg_enabled.gif" alt="" width="16" height="16" border="0"/> 

<style> 
    .changeImg { 
         // I need src="theImg_enabled.gif" 
    } 

    .changeImg.disabled { 

         // I need src="theImg_disabled.gif" 
    } 
</style> 

Answer 1

JavaScript로 처리 할 수 ​​없습니다 (JavaScript로 처리 할 수 ​​있음).

그러나, 이미지는 <img> 요소로하지 표시했지만 다른 요소의 background-image로, 당신이 CSS 속성 (example)를 변경하여 그렇게 할 수 있다면.

Answer 2

당신은 CSS를 사용하여 할 수 없어, 당신은 자바 스크립트를

document.getElementById("my_id").src="URL"; 

당신이 요소의 배경 이미지를 가지고있다 그러나 경우

으로 클라이언트 측 스크립트를 사용해야합니다, 당신은 호버에 그를 변경하려면, 당신은 확실히 같은 것을 쓸 수있다

div { 
    background-image: url('SRC'); 
} 

div:hover { 
    background-image: url('SRC2'); 
} 

Answer 3

당신은 img의 CSS를 바꿀 수 있지만 자바 스크립트를 사용해야한다. 그래서 자바 스크립트에서 img의 src를 변경하십시오.

Answer 4

에 값을 설정하면 img src을 CSS를 사용하여 변경할 수 없습니다.

용액 1

<img class="changeImg" /> 
<style> 
    .changeImg { 
     border:0; 
     width:16px; 
     height:16px; 
     background-image: url('theImg_enabled.gif'); 
    } 
    .changeImg:hover { 
     background-image: url('theImg_selected.gif');  } 
</style> 

해결책 2 :

<a href="." class="changeImg" /> 
    <style> 
     .changeImg a { 
      display:block; 
      width:16px; 
      height:16px; 
      background-image: url('theImg_enabled.gif'); 
     } 

     .changeImg a:hover { 
      background-image: url('theImg_selected.gif'); 
     } 
    </style>