Change an image using only CSS.

Question

I have something like

<a href="OnlyThisONE"
 <img class="SameClassForAllIMG" src="random.png"> 
</a>

I would like to replace the image which something else using only CSS. Is this possible?

Here is the Javascript solution.

var images = document.getElementsByTagName('IMG');
for (var i = 0; i < images.length; ++i) {
    if (images[i].src == "random.png")
        images[i].src = 'new.png';
}  

Here is a possible CSS solution

.SameClassForAllIMG {
  background: url(new.png) no-repeat;
}

The issue is the CSS should do it for the IMG only under the "OnlyThisONE" href, and not all of them. Is this possible using only CSS?

Answer 1

This is possible using only CSS. You can target the image using a[href='OnlyThisONE'] and hide the <img> tag within, then apply a background to the <a> link.

CSS

a[href='OnlyThisONE'] img {
    display: none;
}
a[href='OnlyThisONE'] {
    background: url('somebackground.jpg');
    width: 100px;
    height: 100px;
    display: block;
}

Answer 2

There are a few approaches you could use. In my opinion, the best one is #1, as it has the broadest browser support and it avoids the use of JS.

1 - You could select just that a (assuming the href is unique), show a background image, and then hide the contained image. You'll also need to specify width , height , and display on the a`:

a[href$='OnlyThisONE'] img {
    display: none; /* hide the image that's there */
}
a[href$='OnlyThisONE'] {
    background: url(someOtherImage.jpg) /* show another image as a background */
    display: inline-block;
    height: 100px;
    width: 100px;
}

2 - Use content:url() , but it doesn't have broad browser support - Is it possible to set the equivalent of a src attribute of an img tag in CSS? After running a quick self-check on support of content:url() I would not suggest doing this, at all. I could only get it to work in Chrome. Try it yourself: http://jsfiddle.net/3BRN7/49/

a[href$='OnlyThisONE'] img {
    content:url("newImage.jpg");
}

3 - Use JavaScript as you have in your question.

Answer 3

If the src is "random.png", "new.png" will be displayed.

HTML

<a href="#">
 <img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=random.png">
 <span></span>
</a>

<a href="#">
 <img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=images.png">
 <span></span>
</a>

CSS

img.SameClassForAllIMG[src*="random.png"] {
    display: none;
}
img.SameClassForAllIMG[src*="random.png"] + span {
    display: inline-block;
    width: 300px;
    height: 100px;
    background: url(//dummyimage.com/300x100/111/fff&text=new.png) no-repeat left top;
}

I guess that this code is the same as your JavaScript solution.

• IE7>= version http://jsfiddle.net/nxvm7/1/
• IE8>= version http://jsfiddle.net/nxvm7/2/

Answer 4

In CSS you could use either pseudo-element on <a> or a background-image in <a> or even in <img> that can only be seen on hover.

here is 2 demo

• one using a pseudo-element

• one using the img tag with a background. (no src changed).

  http://codepen.io/anon/pen/Jchjw

<p>Set background-image, and resize it to zero with padding on :hover 
<a href="#nature"><img class="a-img" src="http://lorempixel.com/120/80/nature/1"> 
</a></p>
<p>use a pseudo-element set in absolute position and overflow in a tag :
<a href="#nature3"><img class="a-img" src="http://lorempixel.com/120/80/nature/3">
</a></p>

img {
  vertical-align:middle;
}
[href="#nature"]:hover .a-img {
  height:0;
  width:0;
  padding:40px 60px;
  background:url(http://lorempixel.com/120/80/nature/2);
}
[href="#nature3"] {
  display:inline-block;
  vertical-align:middle;
  position:relative;
  overflow:hidden;
}
[href="#nature3"]:after {
  content:url(http://lorempixel.com/120/80/nature/4);
  vertical-align:top;
  position:absolute;
}
[href="#nature3"]:hover:after {
  left:0;
}

The a:hover + img background works with oldest IE an it keeps the alt attribute useful, this would be my choice. pseudo-element :after/:before works from IE8, but not the ::* after/ :: *before syntaxe.

theres in css of course, many other solution working with a or img with or without a translucide gif/png :( ....