Is it possible to change img src attribute using css?

Question

I\'m trying to change img src (not the background img src) with css

  

#btnUp{
    cursor:poi         


        

Answer 1

You can use CSS to a) make the original image invisible by setting its width and height to 0, or moving it off-screen etc, and b) insert a new image in its ::before or ::after pseudo-element.

That will be a performance hit though, as the browser will then load both the original and the new image. But it won't require Javascript!

Answer 2

You can use :

content: url("/_layouts/images/GEARS_AN.GIF")

Answer 3

You could set the image to a completely transparent image, then change the background image like so:

img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}

The images do have to be the same size though. :( Hope this helps!