Rollovers de imagenes con Jquery

<head>
<script src="jquery/jquery-1.3.2.js"></script>
<script src="js/rollovers.js"></script>
    <script>
        $(document).ready( function(){
           IMG.ImgRollover.init();
        });
    </script>  
</head>

<body>
<img src="img/buttons/head_condiciones.gif" class="rOver" style="margin-left:5px;" border="0" alt="Condiciones" />
</body>

El archivo rollovers.js:

IMG = {};

IMG.ImgRollover = {
init: function(){
  this.ImgPreload();

  $(".rOver").hover(
 function () { $(this).attr('src', IMG.ImgRollover.NormalImg($(this).attr('src'))); },
 function () { $(this).attr('src', IMG.ImgRollover.HoverImg($(this).attr('src'))); }
  );
},

ImgPreload: function(){

  $(window).bind('load', function() {
 $('.rOver').each(function(key, elm) { $('<img>').attr('src', IMG.ImgRollover.HoverImg($(this).attr('src'))); });
  });
},

NormalImg: function(img){
  return img.substring(0, img.search(/(\.[a-z]+)$/)) + '_on' + img.match(/(\.[a-z]+)$/)[0];
},

HoverImg: function(img){
  return img.replace(/_on\./, '.');
}
};

Rollovers de imagenes con Jquery

Entrades relacionades:

Deixa un comentari