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\./, '.');
       }
    };
     




    Dodano przez: igor
    Ranga: Administrator serwisu Punktów: 0
    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-2025 v.1.5 | design: diviXdesign & rainbowcolors