0

I'm seeking a way to override the src of an image. The html setting the image is:

<img src="/img/commerce/reports/view_manager.gif" alt="View Manager" title="View Manager" border="0">

The location of the image is hardcoded and cannot be modified in this site as the code is proprietary. I am able to override the image using the following css:

.commerce-sidebar-item[href*='displayViewManager'] > img {
    content: url("https://cpq-p10-022.bigmachines.com/bmfsweb/cpq-p10-022/image/apps_20.png")!important;
}

But it does not work in Firefox. I then found that using :before or :after may resolve the issue. https://support.mozilla.org/en-US/questions/897824

Alas, that doesn't work in this site.

Are there any other alternatives to override the image source using css or javascript?

Thank you

Grundy
  • 13,356
  • 3
  • 35
  • 55
COBETCKNN17
  • 1
  • 1
  • Is this a duplicate of http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag ? – spozun Dec 04 '15 at 18:00
  • 1
    You can run JS on the page? If so, how "location ... cannot be modified"? – Teemu Dec 04 '15 at 18:02
  • Check http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag .. – Daniel Corzo Dec 04 '15 at 18:04
  • 3
    Pseudo elements don't work on img tags. http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements You're going to need JS; CSS won't accomplish this task. – andi Dec 04 '15 at 18:18
  • 1
    If you're really set on CSS but your HTML is flexible, you could use a background-image instead. That would be easy to switch out using CSS. That requires you to set the dimensions of the "containing" div beforehand, so you can `contain` the background image or have it `cover` the container, using the `background-size` property. But since you listed this under JavaScript as well: Changing the `src` attribute would be the go-to move – Ben Philipp Dec 04 '15 at 19:36
  • Thank you for the responses. Modifying the html is not an option as the site is proprietary and has locked down the html. I am able to use background-image: url() to render the desired image. However, it now shows behind the image I want to hide. Can anyone think of a way to hide the original image source, linked to the img element and at the same time display the background-image? – COBETCKNN17 Dec 07 '15 at 17:50
  • What do you mean with "has locked down the HTML"? If you can execute JS on a page, you can do what ever you want to its HTML, like `document.querySelector('.commerce-sidebar-item[href*='displayViewManager'] > img').src = ' ... ';` – Teemu Dec 08 '15 at 19:51

0 Answers0