i'm using the below javascript to change an image on an aspx in asp.net c#

<script language="JavaScript" type="text/javascript">        
        var updateImageWhenHashChanges = function()
        {
            theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
            if(window.location.hash == "#size=2")
            {
              theImage.src = "<%# Eval("realfilename", "/files/l{0}") %>";
            }
            else if(window.location.hash == "#size=3")
            {
              theImage.src = "<%# Eval("realfilename", "/files/{0}") %>";
            }
            else if(window.location.hash == "#size=1")
            {
              theImage.src = "<%# Eval("fullthumbname", "/thumbnails/{0}") %>";
            }
            else 
            {

            }
        }       
</script>

here's how i call it with a link

<a href="#size=3" onclick="updateImageWhenHashChanges();">test</a>

the problem is that it only does what i'm expecting on the SECOND click of the link, because it seems onclick fires before the href, so the first time i'm just placing the var and the 2nd time i'm actually getting what i want.

does anyone know how i can fix this? i'm trying to get the image to change on each click