使用HTML5和Javascript的多图像翻转

Question

好的......我似乎无法获得第三张图片，但我知道它是因为我的可怜的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'。