javascript rollover image

Question

Salut J'ai une question sur le renversement d'image, mais ce n'est pas ce que vous penseriez.

Je l'ai vu un exemple http://www.asos.com/ et cliquez sur le bouton d'accueil (en haut nav gauche)

Vous pouvez voir que lorsque vous capotage une image cette image reste en surbrillance et les autres foncent.

Je sais que cela a été fait avec jquery mais le code est très salissant. Est-ce que quelqu'un a déjà vu cela ou sait comment le faire?

Merci

Answer 1

solution rapide (il peut être accordé plus court, je suppose):

<div class="images"> 
    <img src="http://www.google.com/google.jpg" /> 
    <img src="http://www.google.com/google.jpg" /> 
    <img src="http://www.google.com/google.jpg" /> 
    <img src="http://www.google.com/google.jpg" /> 
</div> 

<script type="text/javascript"> 
$().ready(function(){ 
    $('.images img').hover(
     function(){ 
      $(this).parents('.images').find('img').not(this).animate({"opacity": "0.3"}, 200); 
      $(this).animate({"opacity": "1"}, 200); 
     }, 
     function(){ 
      $(this).animate({"opacity": "1"}, 200); 
     } 
    ); 
$('.images').bind('mouseleave',function(){$(this).find('img').animate({"opacity": "1"}, 200);}); 
}); 

Answer 2

Tout d'abord: Firebug est votre ami. La technique employée est plus simple qu'on pourrait le penser: ils réduisent simplement l'opacité des images à 0,3. Comme l'arrière-plan est noir, les images apparaissent noircies. Ainsi, le code pourrait ressembler à ceci:

$('img.fade').live('mouseover', function (e) { 
    var $this = $(this).fadeTo(500, 1.0); 
    $('img.fade').not($this).fadeTo(500, .3); 
); 
$('img.fade').live('mouseout', function (e) { 
    var $this = $(this); 
    $('img.fade').not($this).fadeTo(500, 1.0); 
);