Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically replace image source with jQuery

I'm trying to replace the default Yelp star rating image for businesses with one of my own. To do so I need to find the corresponding image source for each of the possible 5 images that could have loaded. And then, based on that I need to load in the proper image I've created.

<div id="starRating">
    <img src="http://yelp-star-1.png"/>
</div>

So, yelp-star-1.png would be replaced with my-star-1.png. So on and so forth. This is probably pretty simple, but I'm new to jQuery and everything I've found has not worked properly. Your expertise is very much appreciated!

like image 358
David Hubler Avatar asked Jun 21 '12 00:06

David Hubler


3 Answers

$("#starRating img").attr("src", "http://pathto/my-star-1.png")

EDIT

I think that you're asking how to dynamically replace the src based on what is there currently. So if there is some direct difference in strings, maybe try

var img = $("#starRating img");
img.attr("src", img.attr("src").replace("yelp", "my"));
like image 79
JeremyWeir Avatar answered Nov 13 '22 02:11

JeremyWeir


If you are just trying to do a basic replace without any pattern:

$('img[src="http://website.com/images/yelp-star-1.png"]').attr('src','http://website.com/images/my-star-1.png');

This could be used with images who have a src attribute starting with http://website.com/images/yelp-star-

$('img[src^="http://website.com/images/yelp-star-"]').each(function() {
   $(this).attr('src', $(this).attr('src').replace("yelp", "my"));
});  
like image 41
GrayB Avatar answered Nov 13 '22 04:11

GrayB


@GrayB gave me a good solution - this does not require you to know the absolute img src:

jQuery('.element img').each(function() {
    jQuery(this).attr('src', jQuery(this).attr('src').replace("find_", "replace_"));
}); 
like image 4
Q Studio Avatar answered Nov 13 '22 02:11

Q Studio