HTML5 및 자바 스크립트를 사용하는 다중 이미지 롤오버

Question

OK ... 세 번째 이미지가 작동하지 않는 것처럼 보일 수 있으며 JS 기술이 좋지 않기 때문에 이미지를 인식 할 수 있습니다. 나는 어딘가에서 문법 오류라고 생각한다. 누군가가 내가 잘못 뭘하는지 말해 줄래?

<script> 
    function turnSwitchOn(img) { 
     if (img.id == "fb") { 
      img.src = "/images/facebook_on.png" 
     } 
     else if (img.id == "twitter") { 
      img.src = "/images/twitter_on.png" 
     } 
     else if (img.id == "su") { 
      img.src = "/images/su_on.png" 
     }; 
    } 
    function turnSwitchOff(img) { 
     if (img.id == "fb") { 
      img.src = "/images/facebook_off.png" 
     } 
     else if (img.id == "twitter") { 
      img.src = "/images/twitter_off.png" 
     } 
     else if (img.id == "su") { 
      img.src = "/images/su_off.png" 
     } 
    } 
</script> 

그리고 내 HTML을 :

<ul id="social"> 
      <li class="social-item"> 
       <a runat="server" href="http://www.facebook.com/"> 
        <asp:Image ID="fb" class="social-item" runat="server" ImageUrl="~/images/facebook_off.png" BorderStyle="None" alt="Like Us on Facebook" title="Like Us on Facebook" onMouseOver="turnSwitchOn(this)" onMouseOut="turnSwitchOff(this)" /> 
       </a> 
      </li> 
      <li class="social-item"> 
       <a runat="server" href="http://twitter.com/"> 
        <asp:Image ID="twitter" class="social-item" runat="server" ImageUrl="~/images/twitter_off.png" BorderStyle="None" alt="Follow Us on Twitter" title="Follow Us on Twitter" onMouseOver="turnSwitchOn(this)" onMouseOut="turnSwitchOff(this)" /> 
       </a> 
      </li> 
      <li class="social-item"> 
       <a runat="server" href="http://www.stumbleupon.com/submit?url="> 
        <asp:Image ID="su" class="social-item" runat="server" ImageUrl="~/images/stumble_upon_off.png" BorderStyle="None" alt="Post Us to Stumble Upon" title="Post Us to Stumble Upon" onMouseOver="turnSwitchOn(this)" onMouseOut="turnSwitchOff(this)" /> 
       </a> 
      </li> 
     </ul> 

Answer 1

이미지 이름이 올바르지 않습니다. html에서는 'stumble_upon_off.png'이고 js에서는 'su_off.png'입니다.