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

There is another way to fix this : using CSS box-sizing.

HTML :

<img class="banner" src="http://domaine.com/banner.png">

CSS :

.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://domain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

http://css-tricks.com/replace-the-image-in-an-img-with-css/

Answer 2

No - CSS can only be used to change CSS background images, not HTML content.

In general UI elements (not content) should be rendered using CSS backgrounds anyway. Swapping classes can swap background images.

Answer 3

You can use a mixture of JavaScript and CSS to achieve this, but you can not do this with CSS alone. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" /> Instead of img you would put file name sans file type.

function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}

Then you use CSS to modify the img tag or the id to your liking.

Answer 4

You can't set the image src attribute via CSS. you can get is, as if you wanted to set use background or background-image.

Answer 5

content:url('imagelinkhere');

This is working, I tested it

Answer 6

you could try something like this

<img id="btnUp" src="empty.png" alt="btnUp" />  

or

<div id="btnUp" title="btnUp"> <div/>  

---

#btnUp{
    cursor:pointer;
    width:50px;
    height:50px;
    float:left;       
}

#btnUp{
    background-image:url('x.png')
}

#btnUp:hover{
    background-image:url('y.png')
}