CSS: Ändern Sie das Bild src auf img: hover

Ich muss die <img>Quell-URL ändern hover.

Ich habe es versucht, aber es wird nicht funktionieren:

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

Jede Hilfe wäre dankbar.

Aktualisieren:

Dies funktioniert nur für Webkit / Google Chrome.

Mit nur HTML und CSS ist es nicht möglich, den src des Bildes zu ändern. Wenn Sie das img-Tag durch das div-Tag ersetzen, können Sie möglicherweise das als Hintergrund festgelegte Bild wie folgt ändern

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Und wenn Sie glauben, dass Sie Javascript-Code verwenden können, sollten Sie in der Lage sein, den Quellcode des img-Tags wie folgt zu ändern

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Ich habe einige Änderungen in Bezug auf Patrick Kostjens geändert.

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

Ich hatte ein ähnliches Problem, aber meine Lösung bestand darin, zwei Bilder zu haben, eines versteckt (Anzeige: keine) und eines sichtbar. Beim Bewegen des Mauszeigers über eine umgebende Spanne ändert sich das Originalbild in Anzeige: keine und das andere anzuzeigende Bild: Block. (Abhängig von Ihren Umständen kann stattdessen "Inline" verwendet werden.)

In diesem Beispiel werden zwei Span-Tags anstelle von Bildern verwendet, sodass Sie das Ergebnis sehen können, wenn Sie es hier ausführen. Ich hatte leider keine Online-Bildquellen.

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

Was Sie tun können, ist ein wenig zu schummeln, indem Sie widthund heightauf 0 setzen, um das eigentliche Bild auszublenden und etwas CSS anzuwenden, um das zu tun, was Sie wollen:

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Und die Polsterung macht das imgTag so groß, wie Sie es möchten (halb so groß wie Ihr eigentliches Bild).

Geige

Hier ist ein alternativer Ansatz mit reinem CSS. Die Idee ist, beide Bilder in das HTML-Markup aufzunehmen und diese entsprechend anzuzeigen oder auszublenden: hover

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle: https://jsfiddle.net/m4v1onyL/

Beachten Sie, dass die verwendeten Bilder für eine ordnungsgemäße Anzeige die gleichen Abmessungen haben. Außerdem sind diese Bilddateigrößen recht klein, sodass das Laden mehrerer Bilder in diesem Fall kein Problem darstellt. Dies kann jedoch der Fall sein, wenn Sie die Anzeige großer Bilder umschalten möchten.

In Bezug auf die Semantik mag ich bisher keine Lösung. Daher verwende ich persönlich die folgende Lösung:

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

Dies ist eine reine CSS-Lösung mit guter Browserkompatibilität. Es wird ein Bild-Wrapper verwendet, dessen Hintergrund zunächst vom Bild selbst ausgeblendet wird. Beim Hover wird das Bild durch die Deckkraft ausgeblendet, sodass das Hintergrundbild sichtbar wird. Auf diese Weise hat man keinen leeren Wrapper, sondern ein echtes Bild im Markup-Code.

Ich habe noch eine Lösung. Wenn jemand AngularJs verwendet: http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

Das Javascript:

function ctrl($scope){
    $scope.img= '000';
}

Kein CSS ^^.

Ich hatte ein ähnliches Problem - ich möchte das Bild auf: Hover ersetzen, kann aber BACKGRUND-IMAGE nicht verwenden, da das adaptive Design von Bootstrap fehlt.

Wenn Sie mich mögen, möchten Sie nur das Bild ändern auf: Hover (aber nicht darauf bestehen, SRC für das bestimmte Bild-Tag zu ändern), können Sie so etwas tun - es ist eine reine CSS-Lösung.

HTML:

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS:

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

Wenn Sie IE7-kompatiblen Code wünschen, können Sie das Bild HOVER ausblenden / anzeigen, indem Sie es nicht nach Deckkraft positionieren.

Da Sie das srcmit CSS nicht ändern können : Wenn jQuery eine Option für Sie ist, überprüfen Sie diese Geige.

Demo

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

Grundsätzlich wird die .hover()Methode verwendet ... es sind zwei Funktionen erforderlich, damit sie funktioniert. Wenn Sie den Schwebeflug betreten und wenn Sie ihn verlassen.

Wir verwenden das .attr(kurz für Attribut), um das srcAttribut zu ändern .

Es ist erwähnenswert, dass Sie die jQuery-Bibliothek benötigen, die wie in der Geige enthalten ist, damit dies funktioniert.

Geige

Stimmen Sie der Antwort von AshisKumar zu,
gibt es eine Möglichkeit, die Bild-URL per Mausklick zu ändern, indem Sie die folgende jQuery-Funktionalität verwenden:

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

Persönlich würde ich mich für eine der JavaScript / jQuery-Lösungen entscheiden. Dadurch bleibt nicht nur Ihre HTML-Semantik erhalten (dh ein Bild wird als img-Element mit dem im Markup definierten üblichen src-Bild angezeigt), sondern wenn Sie eine JS / jQuery-Lösung verwenden, können Sie auch JS / verwenden. jQuery zum Vorladen Ihres Hover-Images.

Wenn Sie das Hover-Image vorab laden, tritt wahrscheinlich keine Download-Verzögerung auf, wenn der Benutzer mit der Maus über das Original-Image fährt, was dazu führt, dass sich Ihre Site viel professioneller verhält.

Es bedeutet zwar, dass Sie von JS abhängig sind, aber die winzige Minderheit, für die JS nicht aktiviert ist, wird wahrscheinlich nicht zu viel Aufhebens machen - und alle anderen werden eine bessere Erfahrung machen ... und Ihr Code wird auch gut sein!

Sie können imgdas srcAttribut des Tags nicht mit ändern CSS. Möglich mit Javascript onmouseover() Event Handler.

HTML:

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>

Javascript:

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

Sie können das img src nicht mit css ändern. Sie können jedoch die folgende reine CSS-Lösung verwenden. HTML:

<div id="asks"></div>

CSS:

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

#asks:hover {
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Wenn Sie kein div mit einem Hintergrundbild verwenden möchten, können Sie auch eine Javascript / jQuery-Lösung verwenden. Html:

<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery:

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

Hierfür können Sie den folgenden Code verwenden

1) HTML

<div id = "aks">

</div>

2) css

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover {
    background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}

In älteren Browsern :hovernur an <a>Elementen gearbeitet. So können Sie etwas tun müsste , wie dies , um es an die Arbeit.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

Der folgende Code funktioniert sowohl in Chrome als auch in Firefox

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

Hier ist eine reine CSS-Lösung. Fügen Sie das sichtbare Bild in das img-Tag ein, fügen Sie das zweite Bild als Hintergrund in das CSS ein und blenden Sie das Bild beim Hover aus.

.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           

<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>

Der beste Weg, srcum das Bild zu ändern , ist:

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Siehe Live-Demo: http://www.audenaerde.org/csstricks.html#imagereplacecss

Genießen!

Versuchen Sie diesen Code.

   .card {

            width: 200px;

            height: 195px;

            position: relative;

            display: inline-block;

        }

        .card .img-top {

            display: none;

            position: absolute;

            top: 0;

            left: 0;
           
            z-index: 99;
width:200px;
        }

        .card:hover .img-top {

            display: inline;

        }

 <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Image Change on Hover with CSS</title>

 
    </head>

    <body>

        <div class="card">

            <img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">

            <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">

        </div>

    </body>

    </html>

Es gibt eine andere einfache Möglichkeit, nur HTML und CSS zu verwenden!

Wickeln Sie Ihr <img>Tag einfach wie folgt mit div ein:

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

Verstecken Sie dann in Ihrer CSS-Datei das Bild und legen Sie das Hintergrundbild für das umschließende div-Element fest:

.image-wrapper:hover {
    background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}

.image-wrapper:hover img {
    display: none;
}

Et voilà!