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.*/
}
Add a comment
|
9 Answers
You can use :
content: url("/_layouts/images/GEARS_AN.GIF")
4 Comments
Timo Ernst
Update: Seems like this only works in webkit/Chrome but not in FF or IE.
Samuel Gfeller
2021 Update:
content: is now widely supported across pretty much all browsers. See: caniuse.com/css-gencontent
orithena
@SamuelGfeller The context of the question implies applicability outside of pseudo-elements, i.e. using
content directly on an <img> tag. Your link only applies to pseudo-elements (like ::before and ::after) -- and Firefox still adheres to the standard here, while Chrome does not.Samuel Gfeller
Right! Is that a more relevant link? caniuse.com/mdn-css_properties_content Btw here is the
content: property used in a similar context than OPs question developer.mozilla.org/en-US/docs/Web/CSS/….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 */
}
3 Comments
RozzA
this was handy for me
Ben Tayaa
happy that can help
Kailash Gajara
@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'); }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')
}
Comments
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!
Comments
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.
Comments
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, 2013 at 16:55
Diodeus - James MacFarlane
115k33 gold badges164 silver badges180 bronze badges
5 Comments
Timo Ernst
Wrong - You can easily do this with CSS3 and the
content attribute, see here: stackoverflow.com/questions/2182716/…Timo Ernst
Update: the content attribute only works in Webkit/Chrome - Not in FF or IE.
Osify
CSS is better, see this: stackoverflow.com/questions/28832129/… and detail here: css-tricks.com/replace-the-image-in-an-img-with-css
asiby
This is a wrong answer. You can set the image using the content property in CSS as noted by @gjgsoftware.com
Annia Martinez
Osify has the answer in his second link
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.
Comments
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!
Comments
content:url('imagelinkhere');
This is working, I tested it
