Onmouseover and onmouseout

i have a image in a “table data” and i am trying to change the image using onmouseover and onmouseout.
the image is being changed when i hover the mouse…but i am not getting back the original image when i remove the mouse…

this is the html code


<td>
    <img src="star-gold/star-gold24.png" alt="select answer" id="opt1" onmouseover="changehovercolor(0);" onmouseout="changehovercolor(1);" />
</td>

and here is the javascript code


<script type="text/javascript">
    function changehovercolor(opt) {
        if(opt == 0)
        {
            document.getElementById("opt1").src = "star-blue/star-blue24.png";
        }
        if(opt == 1)
        {
            document.getElementById("opt1").src = "star-blue/star-blue24.png";
        }
    }
    </script>

i am not able to understand what’s going wrong.BTW i am using firefox browser to check.
Thank you

i am sorry actually it must be


<script type="text/javascript">
    function changehovercolor(opt) {
        if(opt == 0)
        {
            document.getElementById("opt1").src = "star-blue/star-blue24.png";
        }
         if(opt == 1)
        {
            document.getElementById("opt1").src = "star-gold/star-gold24.png";
        }
        
    }
    </script>
    

and now it’s working