css - How to change the Img tag src through css only?

Question

How can I replace the image tag src value through css ? and i want support in ie8 ,firefox ,chorme,safari

<div class="any">
 <img src="images/i.png"/>
</div>

replace this src value through css only.

Thanks

Answer 1

You can't change the src tag of the image with CSS, because the image src is nothing to do with CSS.

The closest you can do is set the background image of the div and get rid of the img tag altogether:

.any {
    background-image: url('images/myimage.png');
}

Beyond this, you will need to use Javascript.

Answer 2

You cannot change the src through CSS. Although what you can do is define a blank div, and give it a width, height, and background-image through CSS. The only drawback with that approach is that the element will not behave like an image for the user (drag/drop, rightclick to save, etc.).

div.any {
  width: 200px;
  height: 200px;
  background-image: url('./some-url-that-you-can-override-by-another-stylesheet');
}

Answer 3

try setting a background image and then moving (with padding) out of the box the original image

something like this...

EDIT i had to tweak it a bit to have it working...

.any img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://placehold.it/150) no-repeat;
  width: 150px; 
  height: 150px;  
  padding-left: 150px; 
}

... and here is the working example http://jsfiddle.net/nNaRn/1/

Answer 4

The only thing that you can do is to set background-image to .any and display:none to img but you will need to set also width and height of the div, since div without content have width of 100%, and height of 0.

.any {
    width: 300px;
    height: 300px;
    background-image: url(image/1.gif);
}
.any img {
    display: none;
}