CSS to change image URL

Question

How can I use an entirely separate CSS file to change/override only the URL for the image IMAGE.png?

<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div class="class3">
            <div id="id3">
                <a class="logo" href="http://domain.com" tabindex="-1">
                    <img src="https://IMAGE.png"></img>
                </a>
            </div>
        </div>
    </div>
</div>

Thanks so much!

You cannot change an **inline** image src/url with CSS...you'd need javascript for that. — Paulie_D, May 09 '16 at 11:47
you can't change the src of an img tag using css. by css you can only change the background-image — ScaisEdge, May 09 '16 at 11:48
please tell what you actually want to do so we will tel you the alternative best solution — Ismail Farooq, May 09 '16 at 12:21
@scaisEdge That's not entirely true. This is a duplicate of http://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css. I googled this very question and found three answers not two hours ago. The answer there was use `#myImage { content: url('path/to/newimage.png') }`. — evolutionxbox, May 09 '16 at 12:45
Possible duplicate of [Is it possible to set the equivalent of a src attribute of an img tag in CSS?](http://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css) — evolutionxbox, May 09 '16 at 12:46
@evolutionxbox .. i think at it but the img have no id .. and then .. — ScaisEdge, May 09 '16 at 12:48
@evolutionbox: The solution you posted with this link is incompatible with many browser versions, IE10 is not supported for example and IE10 is still used by many people.. — GiftZwergrapper, May 09 '16 at 12:51
@GiftZwergrapper I know. I didn't say you were wrong, just not entirely correct. - Also, this question is a duplicate, and should be marked as such. — evolutionxbox, May 09 '16 at 12:51

Danish Adeel · Answer 1 · 2016-05-09T12:49:49.710

If you wants to achieve it with css, do it like this (Recommended).

.btn {
 display: block;
 width: 80px;
 height: 80px;
 background: url(http://mygimptutorial.com/images/button-with-metal-ring/13.jpg) no-repeat;
 background-size: contain;
 text-align: center;
 color: #fff;
 text-decoration: none;
}
.btn:hover {
 background: url(http://mygimptutorial.com/images/button-with-metal-ring/8.jpg) no-repeat;
 background-size: contain;
}

<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div class="class3">
            <div id="id3">
                <a class="btn" href="http://domain.com" tabindex="-1"></a>
            </div>
        </div>
    </div>
</div>

And with js do following.

$('.logo img').hover(function(){
 $(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/8.jpg');
},function(){
 $(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/13.jpg');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div class="class3">
            <div id="id3">
                <a class="logo" href="http://domain.com" tabindex="-1">
                <img src="http://mygimptutorial.com/images/button-with-metal-ring/13.jpg"></img></a>
            </div>
        </div>
    </div>
</div>

score 2 · Answer 2 · edited Aug 16 '21 at 09:34

2

use content in your dark-mode class

darl
content:url(image.jpg);

edited Aug 16 '21 at 09:34

STA

30,729
8
45
59

answered Aug 16 '21 at 08:54

vivit phruktayanon

21
1

score 1 · Answer 3 · answered May 09 '16 at 12:17

1

You can't change it with CSS, you need Javascript for that. But if you are trying to change the image on for example hover, you could remove the img-tags and use a div instead on which you set a background-image. In your CSS you can then create a block where you change the image on hover.

answered May 09 '16 at 12:17

GiftZwergrapper

2,602
2
20
40

That's not entirely true... see http://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css – evolutionxbox May 09 '16 at 12:47
@evolutionbox: The solution you posted with this link is incompatible with many browser versions, IE10 is not supported for example and IE10 is still used by many people.. – GiftZwergrapper May 09 '16 at 12:49
Whilst it is true, like many things, that it isn't compatible in many browsers, it does show that it is possible to change the image src using only css. Making "You can't change it with CSS" mostly correct, but still not true. - Also, this question is a duplicate, and should be marked as such. – evolutionxbox May 09 '16 at 12:53

CSS to change image URL

3 Answers3