jQuery swapped image not loading

I'm trying to get an image to swap on the click event of a div class using jQuery .attr from the original image source location of "Images/origImage" to a new image source location of "Images/newImage"

When I click in the div the image Url property does change if right click on image and view the Address (URL) property I see the new image URL I but in the browser the image does not load - I see the white box with the red cross. My jQuery code is in a ASP.NET Master page and the div and image markup is in the content page.

Here is the content page markup

 <div class="xxx">
   <img src="Images/origImage" class="changesrc" />
 </d开发者_开发问答iv>

And in the master page head I have:

<script language="javascript" type="text/javascript">
    $("div.xxx").click(function(){  
      $('.changesrc').attr("src", "Images/newImage");
    });
</script>

Could anyone help me on how to achieve swapping the image and getting it to load in the browser. I tried preloading the new image but that did not seem to work.

This should work in most browsers. Have you used Firebug or something like that to see if the browser is attempting to download the new image? Maybe there is something wrong with the URL (wrong location, not URL encoded, etc)...

I've implemented something similar using the background style, I wonder if this would help you out. I split out the img variable explicitly:

  $("div.xxx").click(function(){

    var img = 'path/toNew.jpg';    
    $('.changesrc').attr('style', 'background: url(' + img  + '); ')

    });