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

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

#btnUp{
    cursor:pointer;
}
#btnUp:hover{
    src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}

score 33 · Answer 1 · edited Nov 10 '13 at 18:20

33

You can use :

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

edited Nov 10 '13 at 18:20

Pranav 웃

8,469
6
38
48

answered Nov 10 '13 at 17:56

gjgsoftware.com

347
3
2

12

Update: Seems like this only works in webkit/Chrome but not in FF or IE. – Timo Ernst Nov 13 '13 at 15:03
1

2021 Update: `content: ` is now widely supported across pretty much all browsers. See: https://caniuse.com/css-gencontent – Samuel Gfeller Jan 25 '21 at 11:52
1

@SamuelGfeller The context of the question implies applicability _outside_ of pseudo-elements, i.e. using `content` directly on an `` tag. Your link only applies to pseudo-elements (like `::before` and `::after`) -- and Firefox still adheres to the standard here, while Chrome does not. – orithena Mar 26 '21 at 13:26
Right! Is that a more relevant link? https://caniuse.com/mdn-css_properties_content Btw here is the `content:` property used in a similar context than OPs question https://developer.mozilla.org/en-US/docs/Web/CSS/content#element_replacement. – Samuel Gfeller Mar 30 '21 at 10:16

score 18 · Answer 2 · answered Jul 08 '14 at 13:53

18

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/

answered Jul 08 '14 at 13:53

Ben Tayaa

406
4
8

this was handy for me – RozzA Mar 18 '16 at 09:42
happy that can help – Ben Tayaa Jul 12 '17 at 21:34
@qadenza This is not the right solution. This changed the background image. The question asked talks about the main image. So you need to use `content` to do the job. Like below: `img.nav-logo { content: url('/Logo.png'); }` – Kailash Gajara May 06 '23 at 09:08

daniel__ · Answer 3 · 2013-07-17T17:12:36.037

5

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')
}

edited Jul 17 '13 at 17:12

answered Jul 17 '13 at 17:06

daniel__

11,633
15
64
91

Mr Lister · Answer 4 · 2015-06-29T15:07:51.920

4

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!

edited Jun 29 '15 at 15:07

answered Jul 17 '13 at 18:42

Mr Lister

45,515
15
108
150

score 3 · Answer 5 · answered Jul 17 '13 at 16:56

3

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.

answered Jul 17 '13 at 16:56

Dhaval Marthak

17,246
6
46
68

score 2 · Accepted Answer · answered Jul 17 '13 at 16:55

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.

answered Jul 17 '13 at 16:55

Diodeus - James MacFarlane

112,730
33
157
176

24

Wrong - You can easily do this with CSS3 and the `content` attribute, see here: http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css#answer-11484688 – Timo Ernst Nov 13 '13 at 14:56
5

Update: the content attribute only works in Webkit/Chrome - Not in FF or IE. – Timo Ernst Nov 13 '13 at 15:03
2

CSS is better, see this: http://stackoverflow.com/questions/28832129/replace-image-src-location-using-css and detail here: https://css-tricks.com/replace-the-image-in-an-img-with-css/ – Osify Jul 25 '16 at 07:38
1

This is a wrong answer. You can set the image using the content property in CSS as noted by @gjgsoftware.com – asiby Sep 23 '16 at 17:26
Osify has the answer in his second link – Annia Martinez Jul 10 '17 at 11:49

score 1 · Answer 7 · answered Jul 17 '13 at 18:10

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.

score 0 · Answer 8 · answered Apr 18 '18 at 20:03

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!

score 0 · Answer 9 · edited Oct 03 '19 at 04:21

0

content:url('imagelinkhere');

This is working, I tested it

edited Oct 03 '19 at 04:21

Hasta Dhana

4,699
7
17
26

answered Oct 03 '19 at 01:16

Raffy Ponce

11

Is it possible to change img src attribute using css?

9 Answers9

Linked