Très simple jQuery rollover

Question

J'ai fait une très simple jQueryimg fonction de retournement inspirée par celui-ci: http://www.smileycat.com/miaow/archives/000224.php.

Il suffit de cocher toutes les img s qui contiennent _off en leur nom et de les échanger avec un img avec le même nom, mais « _A » au lieu de « _off ».

Étant donné que je ne peux pas utiliser le fond img dans ma mise en page, je pense que c'est une solution pratique. Mais j'ai l'impression que l'échange n'est pas fluide, comme si la fonction était lente. Que pensez-vous? Y a-t-il des façons de l'optimiser?

Voici le code:

function roll_over() { 
     $("img[src*='_off']").hover(
      function() { 
       var stringa = $(this).attr("src"); 
       var stringa = stringa.replace("_off", "_on"); 
       $(this).attr("src", stringa); 
      }, 
      function() { 
       var stringa = $(this).attr("src"); 
       var stringa = stringa.replace("_on", "_off"); 
       $(this).attr("src", stringa); 
      } 
     ); 
    } 

Answer 1

faire est inefficace $("img[src*='_off']") à plusieurs reprises. Cela signifie que le navigateur doit tout chercher sur une page lorsque vous vous retournez. Vous devez inclure jQuery Lint pour plus d'informations sur l'optimisation ...

Answer 2

Votre code est incorrect. Pourquoi?

1. Il échouera lorsque vous aurez l'image comme ceci: ...src="/images/my_office.png"...
2. Vous utilisez JS quelque chose qui est si primitive qui peut être fait en CSS pur
3. Les images *_on seront chargés sur mouseover événement donc vous ne verrez aucune image pendant un moment.

Comment résoudre tous ces problèmes? Utilisez CSS Sprites.

1. Créer une image comme celle-ci: http://www.digart.pl/gfx/ico/s/fb.gif
2. Code HTML: <a href="..." id="myId">blah</a> (Evidement, vous ne devez pas utiliser l'élément A).

3. code CSS:

   #myId { 
       display: inline-block; /* or block, or even inline with correct line-height */ 
       width: 33px; 
       height: 20px; 
       background: url(/path/to/img) 0 0 no-repeat; 
   } 
   #myId:hover { 
       background-position: 50% 0; 
   } 
   

Si vous voulez continuer à automatiser processus puis utilisez JS seulement pour changer de position de fond au lieu de l'image.

Answer 3

J'ai trouvé une bonne fonction ici http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html

$("#mylink img").hover(
function() 
{ 
    this.src = this.src.replace("_off","_on"); 
}, 
function() 
{ 
    this.src = this.src.replace("_on","_off"); 
} 
); 

Je précise que l'ID ou classe de imgs

Answer 4

Que diriez-vous quelque chose comme:

// Add an image to your page as: 
// <img src="button.png" class="rollover"> 

<script type='text/javascript'> 
$(document).ready(function(){ 
    initRollovers(); 
}); 
function initRollovers() { 
    // Assign a class to the images you want to have as roll-over enabled. 
    // Example: 
    // <img src="button.png" class="rollover"> 
    // NOTE: No "dot" when setting the class on the image... But jQuery needs the .dot in order to search for classes in this script: 
    var classIdentifier = ".rollover"; 

    // This example assumes that only the "on" state has a suffix: 
    // button.png 
    // button_on.png 

    // If you have a suffix for both states, edit them here: 
    // button_off.png 
    // button_on.png 
    // ... would be edited as: 
    // var offSuffix = "_off.png"; 
    // var onSuffix = "_on.png"; 

    var offSuffix = ".png"; 
    var onSuffix = "_on.png"; 

    $(classIdentifier).each(function() { 

     var obj = $(this); 
     var mySrcOff = obj.attr("src"); 
     var mySrcOn = mySrcOff.replace(offSuffix, onSuffix); 
     obj.mouseout(function() { 
      $(this).attr("src", mySrcOff); 
     }); 
     obj.mouseover(function() { 
      $(this).attr("src", mySrcOn); 
     }); 

     // Preload Off State 
     $('<img />').attr('src', mySrcOn).appendTo('body').css('display','none'); 

    }); 
} 

</script> 

.