0 Replies - 414 Views - Last Post: 15 June 2009 - 11:11 AM

#1 PsychoCoder   User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1660
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

[jQuery] Image rollovers with JQuery

Posted 15 June 2009 - 11:11 AM

Description: 1) Need latest version of JQuery (http://jquery.com) 2) Place following code in file named rollovers.js 3) Each image you want the rollover affect on add class="rOver" to each tag 4) Each image's rollover image needs to end with _over. Ex home.png for normal home_over.png for the rollover imageThis is a snippet for doing image rollovers with JQuery. Check "Instructions for what is needed
//Code for rollovers
IMG = {};
      
IMG.ImageRollover =
{
     init: function()
     {
        this.preload();
        
        $(".rOver").hover(
           function() 
           { 
                $(this).attr( 'src', IMG.ImageRollover.HoverImg($(this).attr('src'))); 
           },
           function() 
           { 
                $(this).attr( 'src', IMG.ImageRollover.NormalImg($(this).attr('src'))); 
           }
        );
     },
     
     preload: function()
     {
        $(window).bind('load', function() 
        {
           $('.rOver').each( function(key, elm) 
           { 
                $('').attr('src', IMG.ImageRollover.HoverImg( $(this).attr('src'))); 
           });
        });
     },
     
     HoverImg: function(src) 
     { 
        return src.substring(0, src.search(/(.[a-z]+)/)) + '_over' + src.match(/(.[a-z]+)/)[0]; 
     },
     NormalImg: function(src)
     { 
        return src.replace(/_over/, ''); 
     }
};

//Place in HEAD section of document




Is This A Good Question/Topic? 0
  • +

Replies To: [jQuery] Image rollovers with JQuery

#2 PsychoCoder   User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1660
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: [jQuery] Image rollovers with JQuery

Posted 15 June 2009 - 11:11 AM

Description: 1) Need latest version of JQuery (http://jquery.com) 2) Place following code in file named rollovers.js 3) Each image you want the rollover affect on add class="rOver" to each tag 4) Each image's rollover image needs to end with _over. Ex home.png for normal home_over.png for the rollover imageThis is a snippet for doing image rollovers with JQuery. Check "Instructions for what is needed
//Code for rollovers
IMG = {};
      
IMG.ImageRollover =
{
     init: function()
     {
        this.preload();
        
        $(".rOver").hover(
           function() 
           { 
                $(this).attr( 'src', IMG.ImageRollover.HoverImg($(this).attr('src'))); 
           },
           function() 
           { 
                $(this).attr( 'src', IMG.ImageRollover.NormalImg($(this).attr('src'))); 
           }
        );
     },
     
     preload: function()
     {
        $(window).bind('load', function() 
        {
           $('.rOver').each( function(key, elm) 
           { 
                $('').attr('src', IMG.ImageRollover.HoverImg( $(this).attr('src'))); 
           });
        });
     },
     
     HoverImg: function(src) 
     { 
        return src.substring(0, src.search(/(.[a-z]+)/)) + '_over' + src.match(/(.[a-z]+)/)[0]; 
     },
     NormalImg: function(src)
     { 
        return src.replace(/_over/, ''); 
     }
};

//Place in HEAD section of document



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1