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

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

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:

screenshot

and then on reloading the page after enabling the rule:

bing

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.

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

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 sites webserver or CMS system, there is nothing you can do. Im leaving the rest of my post below just in case I have misinterpreted:


Im 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 images 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;>

Leave a Reply

Your email address will not be published.