Loading:


Zmiana obrazka po najechaniu myszką - JQuery

Skrypt zmienia obrazek po najechaniu na niego myszką, automatyczna nazwa obrazka to nazwa z sufiksem _o np dla obrazka obraz.jpg obrazkiem po najechaniu będzie obrazek_o.jpg.

Skrypt opiera się o bibliotekę JQuery którą trzeba pobrać ze strony JQuery project

 

Użycie jest bardzo proste:

<img src="image1.gif" class="ro" />
<img src="image2.gif" class="ro" />
<img src="image3.gif" class="ro" />
<input type="image" src="image1.gif" class="ro" />


class="ro" odpowiada za reakcje javascript hover

dla pierwszego <img src="image1.gif" class="ro" /> obrazkiem po najechaniu będzie image1_o.gif



Napisz Artykuł

Listing


//Funkcja zmieniająca obrazek po najechaniu na niego myszką
$(document).ready( function()
{
   PEPS.rollover.init();
});

PEPS = {};

PEPS.rollover =
{
   init: function()
   {
      this.preload();
     
      $(".ro").hover(
         function () { $(this).attr( 'src', PEPS.rollover.newimage($(this).attr('src')) ); },
         function () { $(this).attr( 'src', PEPS.rollover.oldimage($(this).attr('src')) ); }
      );
   },

   preload: function()
   {
      $(window).bind('load', function() {
         $('.ro').each( function( key, elm ) { $('<img>').attr( 'src', PEPS.rollover.newimage( $(this).attr('src') ) ); });
      });
   },
   
   newimage: function( src )
   {
      return src.substring( 0, src.search(/(\.[a-z]+)$/|>) ) + '_o' + src.match(/(\.[a-z]+)$/|>)[0];
   },

   oldimage: function( src )
   {
      return src.replace(/_o\./, '.');
   }
};
 


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=4484

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors