JQuery / Javascript Image Replace

Question

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.

Could you give us a link, where this widget is actually used? Otherwise I would try to have a look into firebug (or any devtool) and see if the image has a style to it, because this would be exactly the jquery - selector you could use. Then just change the src-attribute by setting ('img').attr('src','/image/twitter.jpg'), and it should be fine. If there's no styling, try digging trough the markup to find a way to address the image, maybe also using .eq() or jquery functions like this. But I could give you a detailed answer, if I could see the widget working somewhere. — GNi33
– GNi33, Commented Aug 25, 2011 at 10:50
Why do you want to do this? Have you verified that you are allowed to? — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Aug 25, 2011 at 10:55
twitter.com/about/resources/widgets/widget_profile This is where the widget is used. — techco1
– techco1, Commented Aug 25, 2011 at 11:09

Mario Menger · Accepted Answer · 2011-08-25 11:14:33Z

4

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");

edited Aug 25, 2011 at 11:14

answered Aug 25, 2011 at 10:48

Mario Menger

5,9022 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GNi33 Over a year ago

wow, just learned something. Thank you! Didn't know that you can use the src-attribute directly in the selector.

Lightness Races in Orbit Over a year ago

You can but it's going to be slow. Why not select the container where you put the Twitter button -- giving it an ID -- and then look for the only img inside that container.

techco1 Over a year ago

I get an error! Uncaught Syntax error, unrecognized expression: src='widgets.twimg.com/i/widget-logo.png')

Mario Menger Over a year ago

Ah, yes, typo.. The ) should be a ], I've replaced it in the code. And as Tomalak suggests, if you put an id on the container in which you put your widget, you can narrow the selector down a bit by changing it to $("yourid img[src=... that should make it considerably faster.

Silent Penguin · Accepted Answer · 2011-08-25 10:52:13Z

0

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.

answered Aug 25, 2011 at 10:52

Silent Penguin

1843 bronze badges

Comments

dmidz · Accepted Answer · 2011-08-25 10:53:21Z

0

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/

edited Aug 25, 2011 at 10:53

answered Aug 25, 2011 at 10:47

dmidz

8967 silver badges20 bronze badges

Collectives™ on Stack Overflow

JQuery / Javascript Image Replace

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related