jQuery - Resmi değiştir src on hover

Question

Temel olarak, resim src değerini değiştirmek için -active.png eklemek istiyorum.

Yani fb.png, hoverda fb-active.png, ve gezinmiyorken fb.png olur.

Ben şimdiye kadar bu yüzden benim kod göndeririz yanlış yapıyorum çok emin değilim: -

HTML

 <div id="main-contact" class="right"> 

      <div id="main-social"> 

       <a href="#!"><img class="img-social" alt="Company - Facebook" class="left" src="images/fb.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - Twitter" class="left" src="images/twitter.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - LinkedIn" class="left" src="images/linkedin.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - Word Press" class="left" src="images/wordpress.png" /></a>    

      </div> 

     </div> 

jQuery

$(document).ready(function() { 

$(function(){ 
    var regexactive = /-active\..*$/; 

    var ct = $('#main-social'); 
    var imgs = $('.img-social img', ct); 

    function activateImage(imgs){ 
     imgs.each(function(){ 
      var img = $(this); 
      var src = img.attr('src'); 
      if(!regexactive.test(src)){ 
       img.attr('src', src.replace('.png', '-active.png')) 
      } 
     }); 
    } 

    ct.on('hover', '.img-social', function(){ 


     var img = $('.img-social img'); 
     activateImage(img); 
    }); 
}); 

}); 

Answer 1

Bu sadece css ile javascript olmadan yapılabilir. Bunun gibi:

Facebook, tw veya twitter vb. Için fb gibi simgeler için farklı sınıflar verin.

HTML:

<div id="main-social">  
    <a href="#!"><span class="img-social fb left" title="Company - Facebook"></span></a> 
    <a href="#!"><span class="img-social tw left" title="Company - Twitter"></span></a> 
    <a href="#!"><span class="img-social ln left" title="Company - LinkedIn"></span></a> 
    <a href="#!"><span class="img-social wp left" title="Company - Word Press"></span></a> 
</div> 

CSS:

.img-social{display:inline-block;height:20px;width:20px;} 
.fb{background:url("images/fb.png");} 
.fb:hover{background:url("images/fb-active.png");} 
.tw{background:url("images/twitter.png");} 
.tw:hover{background:url("images/twitter-active.png");} 
.ln{background:url("images/linkedin.png");} 
.ln:hover{background:url("images/linkedin-active.png");} 
.wp{background:url("images/wordpress.png");} 
.wp:hover{background:url("images/wordpress-active.png");} 

Sen verimlilik için sprite kullanabilirsiniz.

Answer 2

Eski tarayıcılarla uyumlu olmanız gerekmiyorsa bunu yalnızca CSS'de yapabilirsiniz.

$(".img-social").hover(function(){ 
    $(this).attr("src", function(index, attr){ 
     return attr.replace(".png", "-active.png"); 
    }); 
}, function(){ 
    $(this).attr("src", function(index, attr){ 
     return attr.replace("-active.png", ".png"); 
    }); 
}); 

Answer 3

Bunu yapmanın yollarından yük vardır: jquery bunu yapmak için

, böyle bir şey deneyebilirsiniz. En basitlerinden biri, aynı görüntüde iki durumu elde etmek ve sonra sadece arka plan konumunu değiştirerek değiştirmektir. Bu şekilde, vurgulu görüntünün halihazırda olduğu gibi yüklenmesi için fazladan bir bekleme yok.

<div id="main-social"> 
    <a href="#!" alt="Company - Facebook" class="left fb">facebook</a> 
    <a href="#!" alt="Company - Twitter" class="left tw">twitter</a> 
    <a href="#!" alt="Company - LinkedIn" class="left li">linkedin</a> 
    <a href="#!" alt="Company - Word Press" class="left wp">Wordpress</a>    
</div> 

CSS

#main-social a { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    text-indent:-1000px; 
    overflow:hidden; 
    background-position: left top; 
} 
#main-social a.fb { 
    background-image: url('fb.png'); 
} 
#main-social a.tw { 
    background-image: url('tw.png'); 
} 
#main-social a.li { 
    background-image: url('li.png'); 
} 
#main-social a.wp { 
    background-image: url('wp.png'); 
} 
#main-social a:hover, #main-social a.active { 
    background-position: left bottom!important; 
} 

Demo JSFiddle

Answer 4

Sen mouseenter, mouseLeave işlevleri kullanabilirsiniz.

<a href="#" class="hover-change-img"><img src="sample1.png" class="img-responsive"></a> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script> 

    $("document").ready(function(){ 
     $(".hover-change-img img").mouseenter(function(){  
      $(this).attr('src','sample2.png');  
     });  
     $(".hover-change-img img").mouseleave(function(){  
      $(this).attr('src','sample1.png');  
     }); 
    }); 

</script> 

Answer 5

Yukarıdaki betikte bu komut dosyasını kullanıyorum ... sadece etkin ve orijinal görüntü arasında geçiş yapın.

$("document").ready(function(){ 
     $(".my_image").mouseenter(function(){  
      $(this).attr('src',function(index, attr){ 
     return attr.replace(".png", "-active.png"); 
    });  
     });  
     $(".my_image").mouseleave(function(){  
      $(this).attr('src',function(index, attr){ 
     return attr.replace("-active.png",".png");});  
     }); 
    });