How to change a website image with javascript?

Question

I'm working with my first Greasemonkey script.

And its for a website that have a logo, i want to change the image to a image i have created, and i wonder how i do this?

like use JavaScript to edit the current html document and replace the image.

Thanks for any help!

Edit: The image is inside a <img> tag, the image i want to change/replace is in this code:

<img class="fb_logo img" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo" width="170" height="36">

Here is the javascript code i tryed and didnt work:

var myImage = document.querySelector('.fb_logo img');
myImage.src = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";

is this logo an element or is it the background of another element? — Joseph Marikle, Jul 27 '11 at 15:21

zzzzBov · Answer 1 · 2011-07-27T15:53:49.070

1

Knowing that you can use browser-specific javascript is a plus.

Use querySelectorAll.

var img = document.querySelectorAll('.yourClass')[0];

~~Note: you're possibly selecting more than one element, so it's returning a nodelist rather than a single node, remember to select the first item in the list.~~

Better yet, use querySelector

var img = document.querySelector('.yourClass');

edited Jul 27 '11 at 15:53

answered Jul 27 '11 at 15:41

zzzzBov

174,988
54
320
367

Rather than use `document.querySelectorAll('.yourClass')[0];`, why not use `document.querySelector('.yourClass');` ? ;) – Brock Adams Jul 27 '11 at 15:46
Chrome: 1, Firefox (Gecko): 3.5 (1.9.1), Internet Explorer: 8, Opera: 10, Safari (WebKit): 3.2 (525.3). Seems pretty compatible to me, unless you're planning on supporting – Hello71 Jul 27 '11 at 15:49
@Brock Adams, because I didn't know about that method. I typically avoid `querySelectorAll` and similar functions because they're not cross-browser compatible. Usually I import a library and work within the library. – zzzzBov Jul 27 '11 at 15:51
@Hello71, I usually *have to* support IE7&8. – zzzzBov Jul 27 '11 at 15:52
@Hello71, i understood what you wrote, i was just clarifying my particular case. Fortunately I don't have to support – zzzzBov Jul 27 '11 at 16:04
woops, i use a function and put it in the function, and at the end of the script, i call the function like this: functionName(); – Stian Olsen Jul 27 '11 at 16:06
@Stian Olsen, please edit your question to update your code. Also, take the time to read the [faq](http://stackoverflow.com/faq) and read up on how to use markdown in SO. – zzzzBov Jul 27 '11 at 16:09

score 1 · Answer 2 · answered Jul 27 '11 at 15:46

var logos = document.getElementsByClassName("fb_logo");

for( var i = 0; i < logos.length; i++ )
{
    // true for all img tags with the fb_logo class name
    if( logos[ i ].tagName == "IMG" )
    {
        logos[ i ].src = "http://www.computerweekly.com/blogs/it-downtime-blog/lolcat-tan.jpg"
    }
}

score 1 · Answer 3 · answered Jul 28 '11 at 05:21

Okay, here's a complete Greasemonkey script that swaps the logo image at Facebook under real-world conditions (meaning that the image may be in different places and you have to deal with the container and background images, etc.).

Note that this script looks for the image in two types of locations, and deals with the surrounding HTML, and CSS, if necessary.

Also note that it uses jQuery -- which is a godsend for writing GM scripts.
Finally: note that I avoid Facebook, and only know of the one logo location (plus the one that the OP reports. If there are new/different locations, deal with them in a similar manner.

// ==UserScript==
// @name            _Facebook Logo Swap
// @include         http://www.facebook.com/*
// @include         https://www.facebook.com/*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

/*--- Found FB logo at:
    "h1#pageLogo a" as a backgound image.

    It's reportedly also at: "img.fb_logo.img"
*/
var desiredImage    = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";

//--- Straight image swap:
$('img.fb_logo').attr ('src', desiredImage);


/*--- Replace the link's -- with the logo as a background -- contents with just a plain image.
    Since this image is transparent, clear the old BG image.
    Also constrain the new img to its container.
*/
$('#pageLogo a').css ('background-image', 'none')
                .append ('<img>').find ('img')  .attr ('src', desiredImage)
                                                .css ( {width: '100%', height: '100%'} );

score 0 · Answer 4 · answered Jul 27 '11 at 15:21

0

find the image tag and replace the src attribute.

var myImage = document.getElementById(idOfImageYouNeedToChange);
myImage.src = "your_image";

Pretty straightforward.

answered Jul 27 '11 at 15:21

harithski

666
1
6
18

What if the image doesnt have a id? but instead it have a class? – Stian Olsen Jul 27 '11 at 15:30
2

@harithski: You do not. [`document.getElementsByClassName("class")`](http://developer.mozilla.org/en/DOM/document.getElementsByClassName) – Hello71 Jul 27 '11 at 15:40
Oops, I forgot about that. I've been using too much Xpath lately. Ignore my answer. – harithski Jul 27 '11 at 15:46

score 0 · Answer 5 · answered Jul 27 '11 at 15:46

0

You can do this very simply with jQuery

        $('.fb_logo').attr('src','newimage.jpg');

answered Jul 27 '11 at 15:46

Johnny Craig

4,974
2
26
27

score 0 · Answer 6 · answered Jul 27 '11 at 15:47

you have to get the reference to your img element first, better use id instead of a class, since getElementsByClassName is not supported in IE until ie9:

with raw javascript (there are many ways of doing this. this is just the one):

var theImg = document.getElementById('imageId');
theImg.src = 'someNewPath'

with something like jQuery(js library) - you can easily select by class or by id or by tag etc:

$('.yourPicClass').attr('src', 'someNewPath')

score 0 · Answer 7 · answered Jul 27 '11 at 15:52

How about using the DOM to find that specific attribute and change it to whatever?

<html>
    <body>
        <img class="fb_logo img" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo">
    </body>
    <script type="text/javascript">
        var yerImg = document.getElementsByTagName("img");
        yerImg[0].setAttribute("src", "http://goo.gl/JP8bQ");
    </script>
</html>

score 0 · Answer 8 · answered Aug 21 '11 at 11:57

querySelector：

return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null.

querySelectorAll：

return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList.

The　Use :

var element = baseElement.querySelector(selectors);
var elementList = baseElement.querySelectorAll(selectors);

Sample :

<html>
<body>
    <img class="fb_logo" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo">
</body>
<script type="text/javascript">
    var myImageList = document.querySelectorAll('.fb_logo');
    myImageList[0].src = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";
</script>
</html>

How to change a website image with javascript?

8 Answers8

Linked

Related