CSS: img: hover'da resim src'yi değiştir

<img>Üzerinde kaynak URL'yi değiştirmem gerekiyor hover.

Bunu denedim ama işe yaramayacak:

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

Herhangi bir yardım memnuniyetle karşılanacaktır.

Güncelleme:

Bu yalnızca Webkit / Google Chrome için çalışır.

Sadece html ve css ile resmin src'sini değiştirmek mümkün değildir. İmg etiketini div etiketiyle değiştirirseniz, arka plan olarak ayarlanan görüntüyü aşağıdaki gibi değiştirebilirsiniz.

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

Ve bazı javascript kodunu kullanabileceğinizi düşünüyorsanız, img etiketinin src'sini aşağıdaki gibi değiştirebilmelisiniz.

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);" />

Patrick Kostjens ile ilgili birkaç değişikliği değiştirdim.

<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/

Benzer bir sorun yaşadım ama benim çözümüm biri gizli (ekran: yok) ve biri görünür olmak üzere iki resme sahip olmaktı. Çevreleyen genişliğin üzerine getirildiğinde, orijinal görüntü şu şekilde değişir: yok ve görüntülenecek diğer görüntü: blok. (Koşullarınıza bağlı olarak bunun yerine 'satır içi' kullanılabilir)

Bu örnek, burada çalıştırırken sonucu görebilmeniz için resimler yerine iki span etiketi kullanır. Maalesef kullanabileceğim herhangi bir çevrimiçi görüntü kaynağım yoktu.

#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>

İşte saf CSS kullanan alternatif bir yaklaşım. Buradaki fikir, her iki resmi de HTML biçimlendirmesine dahil etmek ve bunların uygun şekilde görüntülenmesini veya gizlenmesini sağlamaktır: 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/

Uygun görüntüleme için kullanılan görüntülerin aynı boyutlarda olduğuna dikkat edin. Ayrıca, bu resimlerin dosya boyutları oldukça küçüktür, bu nedenle çoklu yükleme bu durumda bir sorun değildir, ancak büyük boyutlu resimlerin görünümünü değiştirmek istiyorsanız olabilir.

Ne yapabilirdi ayarıyla biraz hile olduğunu widthve height0'a gerçek görüntüyü gizlemek ve istediğini yapmak biraz CSS uygulamak için:

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

Ve imgetiketi, olmasını istediğiniz boyutta yapan dolgu (gerçek görüntünüzün yarısı boyutunda).

Vaktini boşa harcamak

Anlambilimle ilgili olarak, şimdiye kadar verilen hiçbir çözümü beğenmedim. Bu nedenle, kişisel olarak aşağıdaki çözümü kullanıyorum:

.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>

Bu, iyi bir tarayıcı uyumluluğuna sahip yalnızca CSS çözümüdür. Başlangıçta görüntünün kendisi tarafından gizlenen bir arka plana sahip bir görüntü sarmalayıcı kullanır. Fareyle üzerine gelindiğinde, görüntü opaklık yoluyla gizlenir, dolayısıyla arka plan görüntüsü görünür hale gelir. Bu şekilde, işaretleme kodunda boş bir paketleyici değil, gerçek bir resim olur.

Bir çözümüm daha var. AngularJs kullananlar varsa: 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>

Javascript:

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

CSS ^^ yok.

Benzer bir sorun yaşadım - resmi değiştirmek istiyorum: hover ama Bootstrap'in uyarlanabilir tasarımının olmaması nedeniyle BACKGRUND-IMAGE kullanamıyorum.

Eğer benden hoşlanıyorsanız, sadece: hover üzerindeki resmi değiştirmek istiyorsanız (ancak belirli resim etiketi için SRC'yi değiştirmek konusunda ısrar etmiyorsanız), bunun gibi bir şey yapabilirsiniz - bu sadece CSS çözümü.

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; }

IE7 uyumlu kod istiyorsanız, şunları gizleyebilir / gösterebilirsiniz: Resmi opaklığa göre değil konumlandırarak HOVER.

srcCSS ile değiştiremeyeceğiniz için : jQuery sizin için bir seçenekse, bu kemana bir bakın.

gösteri

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

Temelde kullanıyor .hover() yöntemi ... Çalışması için iki işlev gerekiyor. Fareyle üzerine geldiğinizde ve ondan çıktığınızda.

Biz kullandığınız .attrdeğiştirmek (özellik için eteğine)src özelliğini.

Bunu yapmak için keman gibi jQuery kitaplığına ihtiyacınız olduğunu unutmamak gerekir.

Vaktini boşa harcamak

AshisKumar'ın cevabına katılıyorum,
aşağıdaki gibi jQuery işlevini kullanarak fareyle üzerine gelindiğinde resim url'sini değiştirmenin bir yolu var:

$(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
    });
 });

Şahsen, JavaScript / jQuery çözümlerinden biriyle giderdim. Bu yalnızca HTML anlamınızı korumakla kalmaz (yani, bir görüntü, biçimlendirmede tanımlanmış olağan src görüntüsüyle bir img öğesi olarak gösterilir), aynı zamanda bir JS / jQuery çözümü kullanırsanız, JS / jQuery önceden yüklenecek hover görüntünüzü için .

Fareyle üzerine gelme görüntüsünü önceden yüklemek, kullanıcı orijinal görüntünün üzerine geldiğinde indirme gecikmesi olmayacağı anlamına gelir ve bu da sitenizin çok daha profesyonel davranmasına neden olur.

Bu, JS'ye bağımlı olduğunuz anlamına gelir, ancak JS'nin etkin olmadığı küçük bir azınlık muhtemelen fazla telaşlanmayacaktır - ve diğer herkes daha iyi bir deneyim yaşayacak ... ve kodunuz da iyi olacak!

Kullanarak imgetiketin srcözniteliğini değiştiremezsiniz CSS. Olası kullanarak JavaScript onmouseover() olay işleyicisi.

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";
}

İmg src'yi css kullanarak değiştiremezsiniz. Yine de aşağıdaki saf css çözümünü kullanabilirsiniz. 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');
}

Veya arka plan resmine sahip bir div kullanmak istemiyorsanız, bir javascript / jQuery çözümü kullanabilirsiniz. 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');});

Bunun için aşağıdaki kodu kullanabilirsiniz

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

}

Eski tarayıcılarda, :hoveryalnızca <a>öğeler üzerinde çalıştı . Eğer bir şeyler yapmak olurdu Yani böyle işe almak için.

<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>

Aşağıdaki kod hem Chrome hem de Firefox'ta çalışır

<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>

İşte saf bir CSS çözümü. Görünür resmi img etiketine koyun, ikinci resmi css'e arka plan olarak yerleştirin, ardından fareyle üzerine gelindiğinde resmi gizleyin.

.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>

srcGörüntüyü değiştirmenin en iyi yolu :

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

Canlı demoyu izleyin: http://www.audenaerde.org/csstricks.html#imagereplacecss

Zevk almak!

Bu Kodu Deneyin.

   .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>

Yalnızca HTML ve CSS kullanmanın başka bir basit yolu var! Etiketinizi div ile şöyle

sarın <img>:

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

Ardından, CSS dosyanızda img'yi gizleyin ve sarma div öğesi için arka plan resmini ayarlayın:

.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à!