0

A tricky question, perhaps with no solution at the moment but I'll ask anyway.

Is there a way using only CSS to replace an image src with another src?

Here are the tricky parameters I have to work with:

  • I have no control over the HTML or the image file I'm trying to replace
  • The system I'm editing on does not allow JS or Jquery
  • There are no divs, IDs, or classes around the image that I can pull from, so I'd need to be able to grab the image directly by the src

Is this possible? I have done a lot of research and I feel like I keep getting close, but not quite there.

Thanks for the input!

nijutu
  • 13
  • 3
  • One question, if there were "divs, ids and classes around the image", would that allow you to replace the image? And how? – GrafiCode Jun 01 '22 at 21:48
  • There are CSS parameters that let you target divs (if they have a class or id) or a class or id directly attached to the image (img id="thisblock" src="whatever.gif" would be selectable as an example). In this case, I have neither to target. – nijutu Jun 01 '22 at 21:51
  • ok, well you can target it this way: `img[src="whatever.gif"] { .... }` – GrafiCode Jun 01 '22 at 21:54
  • You could select an image using its src attribute, but I'm not clear that's going to help you as you can't change the value of the attribute using CSS and imgs can't have before or after pseudo elements. If we could see the HTML context around an img element there might be some hack using background images or content but it's difficult to see how in the abstract. – A Haworth Jun 01 '22 at 21:56
  • as for the replacement, I'm afraid there's not a "real technique" in CSS, only workarounds. Like this one: https://stackoverflow.com/a/10247567/5334486 (it exploits the use of `background-image`, as @AHaworth suggested) – GrafiCode Jun 01 '22 at 21:58
  • Sorry could you please add a little bit more context on what I would put in the { } section to add my new image? I'm not great at this. Thank you for your help :) – nijutu Jun 01 '22 at 21:59
  • please see the link – GrafiCode Jun 01 '22 at 22:01
  • Sorry hopefully this works, I'm not sure how to post code but it's like this:

    Descriptive text
     – nijutu Jun 01 '22 at 22:01
  • Ah wow this site I'm on REALLY doesn't want me to replace the image, that was blocked too. Oh well, this was exactly the answer I needed and I so appreciate the help!! – nijutu Jun 01 '22 at 22:04
  • What was blocked? – A Haworth Jun 02 '22 at 05:23

0 Answers0