How do i swap out images in jquery

I have my site that the users can swap out three products and there are images for each product so rather 开发者_JS百科then doing an ajax call every time the user clicks the button, I wanted to just have the image urls in the html with display none to grab when needed.. so for example, here is my html

    <img src="<?php print $product[$selected_product]['product_image']; ?>" width="auto" height="199" alt="" />
</div>
<p style="display:none;" class="image_<?php print $product["standard"]['product_id']; ?>"><?php echo $product["standard"]['product_image']; ?></p>
<p style="display:none;" class="image_<?php print $product["professional"]['product_id']; ?>"><?php echo $product["professional"]['product_image']; ?></p>
<p style="display:none;" class="image_<?php print $product["premium"]['product_id']; ?>"><?php echo $product["premium"]['product_image']; ?></p>

As you can see the one that is displaying is the one selected but if the user selects one of the other images i need to change the src of the image tag...here is my jquery

var image = $(this).parents(".item").find(".image_" + this_id).text();
image = $.trim(image);
console.log(image)
$(this).parents(".item").find(".item-image img").attr("src", image);

but the problem is that the console.log prints out the image url correctly but it sometimes when i click the image doesnt change and i get this error

Image corrupt or truncated: http://posnation.com/shop_possystems/image/data/1B.png

---

A clearer way to do this would be to render three <img> tags and set their CSS so that they are on top of each other. Then use the jQuery show/hide functions to show the appropriate one.