CODEWITHSUNDEEP
jquery
Joe
Joe

Reputation: 3

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" />
 </div>

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.

Upvotes: 0

Views: 145

Answers (2)

RobLabs
RobLabs

Reputation: 2347

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  + '); ')

    });

Upvotes: 0

jmans
jmans

Reputation: 5658

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)...

Upvotes: 1

Related Questions