How to override HTML image using CSS

Question

I have the current code:

#content img[src="/img/test.gif"] { 
    background-image:url(dark-img.png) !important;
}

From my understanding !important;redefines existing values?

Why doesn't this override the current HTML image? The background shows behind the HTML image.

I want it in front of the HTML image, is this possible with CSS or JS?

Edit: for what it's worth, im to make a usercript that will change the existing site style. Therefore, I do not have direct access to the HTML image.

Answer 1

Use your "usercript" to change the value of the "src" attribute.

If there is an ID there, you can do this:

document.getElementById('TheImgId').src = 'yournewimagesrc';

:

var imgElements = document.getElementsByTagName('img');

imgElements. src , , .

Update:

JavaScript:

<script language="javascript">
    function ChangeImageSrc(oldSrc, newSrc) {
        var imgElements = document.getElementsByTagName('img');
        for (i = 0; i < imgElements.length; i++){
            if (imgElements[i].src == oldSrc){
                imgElements[i].src = newSrc;
                break;
            }
        }
    }
</script>

HTML:

<img src="http://i.stack.imgur.com/eu757.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<script language="javascript">
    setTimeout("ChangeImageSrc('http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000);
</script>

5 . Live Demo.

Answer 2

javascript ! CSS, CSS, .

. http://www.audenaerde.org/csstricks.html#imagereplacecss

Answer 3

background-image, , ( ...) . .

, , , .

, !important . , 1) , 2) , CSS. huffing and puffing !important , .

Answer 4

CSS . (, , seo, ,...)

9 (!) :

http://css-tricks.com/css-image-replacement/

css : .

Answer 5

. . "" css , , , .

Answer 6

, , id , "", IE, img [src= "/img/test.gif" ] . id.

Answer 7

, , , , ; , .

, . :

• , . CSS .

• , Javascript src. ( CSS, JS)

EDIT:

, 2 - Javascript src. ; - :

document.getElementById('myimgelement').src='/newgraphic.jpg';

Answer 8

SO.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">

.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

. , , alt , Javascript?

Answer 9

Here is the code using only css :

<img src="tiger.jpg" 
     style="padding: 150px 200px 0px 0px; 
            background: url('butterfly.jpg'); 
            background-size:auto; 
            width:0px; 
            height: 0px;">

• sets the image size to 0x0,
• adds a border of the desired size (150x200) and
• uses your image as a background image to fill.

If you answer this answer, give @RobAu the answer up.