CODEWITHSUNDEEP
javascriptjquery
techco1
techco1

Reputation: 61

JQuery / Javascript Image Replace

I am trying to do a very simple image replace of the Twitter widget logo to a logo I specify. How can I do this, please note that the twitter logo has NO ID or class on it, so I am not exactly sure how I can do a replace, it may have to loop through each of the images and then only replace the one that matches.

Example ..

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('twitter').start();
</script>

Above is the Twitter code I am using, it renders the twitter logo and the URL is http://widgets.twimg.com/i/widget-logo.png, I need to change this to /image/twitter.jpg.

Upvotes: 0

Views: 430

Answers (3)

Mario Menger
Mario Menger

Reputation: 5902

Using jQuery: find the image that has the source attribute set to the twitter logo, and replace the src attribute with the relative url to your image:

$("img[src='http://widgets.twimg.com/i/widget-logo.png']").attr("src","/image/twitter.jpg");

Upvotes: 4

dmidz
dmidz

Reputation: 896

you could use an attribute test (because it is the particular information of the element), if strictly equal :

var logoTwitter = $('img[src="http://widgets.twimg.com/i/widget-logo.png"]');

If the picture url is not so consistent(mean maybe a part is variable), you can test ends with :

var logoTwitter = $('img[src$="/widget-logo.png"]');

check these selectors : http://api.jquery.com/category/selectors/

Upvotes: 0

Silent Penguin
Silent Penguin

Reputation: 184

One option is to use the selector to locate the property with the logo on it. This can be done using the selector $('div.twtr-ft a[href="http://twitter.com"] img') to locate the tag, and then replace the src attribute using the attr function.

My issue with the above is that changes made to the widget can break your code. I chose to use the homepage for the selector since that is less likely to change than the location of the image. div.twtr-ft is optional, but helps prevent any additions to the widget which contain an anchor with an image from breaking the code.

Upvotes: 0

Related Questions