how to run href="#var=something" before onclick function fires in javascript?

Question

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

Answer 1

Perhaps you can replace your href with javascript:void(0) and then handle the link's "natural" click behavior at the end of your onclick() script.

Answer 2

Have you tried a different event like onmouseup or onunload?

Answer 3

You should pass in the current anchor's href to the function call and then use that in your if statements, then return false so that the default behavior isn't used.

var updateImageWhenHashChanges = function(pChoice) 
    { 
        theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a"); 
        if(pChoice == "size2")
        { 
// more lines of picking and choosing... and finally:
return false;

and then in the anchor

<a href="size2" onclick="return updateImageWhenHashChanges(this.href);">test</a>

It would also be much better if you could use your databinding to put the real href of the image into the href of the anchor so that if JavaScript wasn't enable the user would still end up being able to see the image in question. Then your function code would just be getting a handle to the image and setting the source to that inbound param.

Answer 4

What about something like this:

<script type="text/javascript">
    var updateImageSize = function(imageType, imageID)
    {
        thisImage = document.getElementById(imageID);
        switch(imageType)
        {   
            case "thumb":
                // change image src to the thumbnail's path
                thisImage.src = "YourThumbNailPath";
            case "medium":
                // change image src to medium image path
                thisImage.src = "YourMediumImagePath";
            case "large":
                // you get the picture
                thisImage.src = "YourLargeImagePath";
            default:
                // whatever you want it to default to
                thisImage.src = "YourThumbNailPath";
        }
    }
</script>

Then the implementation:

<a href="javascript:void(0);" onclick="updateImageSize('thumb','tl00_ContentPlaceHolder1_Image1a');">Update Image</a>

Hope that helps.