How do I replace a certain image on a website with another image?

Question

There's this site that has an image I want to replace. Just like the scripts that replace the background of a page, like Google.

In the html, it's in img scr. How do I replace that specific source on the page with another source so every time I visit that page, it displays the image I want instead of the one that's normally there?

How do you load this site? How do you intend to replace the image? Javascript? CSS? — Devin M, Jun 27 '11 at 03:16
What do you mean? Do you want to replace it dynamically when people with your add-on/script visit the page? If so, try Greasemonkey. — Matthew Flaschen, Jun 27 '11 at 03:17
Did you want to just modify the html source code to change the image that way? — , Jun 27 '11 at 03:18
It's not possible in HTML, it's a static language, you have to use a dynamic language, such as PHP or ASP.net for serverside (everytime you load the page) or Javascript for client side (everytime you do a specific thing in the page). — Tamer Shlash, Jun 27 '11 at 03:29

score 4 · Answer 1 · answered Apr 21 '19 at 13:47

A browser extension can accomplish this for you. I am familiar with how to do this with Requestly which my friend has made.

As an example I demonstrate how you would replace the Google logo image with Bing logo image with a simple rule:

and then on reloading the page after enabling the rule:

score 1 · Answer 2 · answered Jun 28 '11 at 04:11

1

If you just want to change it for yourself, Greasemonkey is ideal. It lets you run a script (Kerin provides a starting point) every time you visit the page. See these Greasemonkey tutorials.

answered Jun 28 '11 at 04:11

Matthew Flaschen

278,309
50
514
539

Winfield Trail · Answer 3 · 2011-06-27T03:34:30.853

0

EDIT: It appears that you want to replace an image on a site that is not yours. If you do not have legitimate access to the site's webserver or CMS system, there is nothing you can do. I'm leaving the rest of my post below just in case I have misinterpreted:

I'm assuming that you want to do this in Javascript, as you tagged your post with "Script." Other script languages exist, of course, but only Javascript really has a meaningful installed base.

First you need to assign the image an ID, something like:

<img src="/images/cat.png" id="mypicture">

Then, inside your Javascript, you can alter the image's source like so:

document.getElementById('mypicture').src = "/images/dog.png";

You can take this technique pretty far, even adding stuff to the image tag like:

<img src="/images/cat.png" id="mypicture" onClick="document.getElementById('mypicture').src = '/images/dog.png';">

edited Jun 27 '11 at 03:34

answered Jun 27 '11 at 03:29

Winfield Trail

5,535
2
27
43

I can't assign an ID to the image, since I can't edit another website's html. – Absolyn Jun 27 '11 at 03:34
This isn't changing the image dynamically, is it? it changes it in a specific way only once. – Tamer Shlash Jun 27 '11 at 03:34
Reddy, if it is another website's HTML then you will **not** be able to make changes that other users can see under any circumstances. – Winfield Trail Jun 27 '11 at 03:35
@Reddy: you can't change other websites, it not possible! we are talking about how to make it in your own pages. – Tamer Shlash Jun 27 '11 at 03:36
That's the thing, I just want it for me to see that image differently, not for everyone. I don't want to edit the HTML itself, I'm very well aware that you can't do that. I just want a script to change it from my view. – Absolyn Jun 27 '11 at 03:36
Does the image have a NAME attribute, or is it inside a DIV with an ID? – Winfield Trail Jun 27 '11 at 04:36

How do I replace a certain image on a website with another image?

3 Answers3