Posts tagged effects

Jquery Image rollover with demo

Mar 24th

Posted by Pankaj in Web development | 14,316 views

16 comments

I have given a code in my earlier post for jquery image rollover. Now here are the final code and guide how to use this code.

  1. you need to creative two image ie: one for normal state and one for active/rollover state. name it like imagename.gif and imagename_active.gif.
  2. put your image in your HTML document.
  3. put all your image in normal state. remember to keep the active state image in same folder.
  4. include jquery latest script from jquery website and include script on your head section.
  5. copy below code and paste after jquery include. (you can put this code in common include file and include after jquery More >
, , , , , , ,

Jquery Image rollover

Feb 15th

Posted by Pankaj in Web development | 324 views

No comments

if you need unobstructive JavaScript for image rollover you can use following code. I am not providing any detail markups for that if you face some problem to use that let me know. i will provide a demo section very soon for all of script.

1234567891011121314151617jQuery.fn.extend({  enter: function() {     return this.each(function() {       var pth = $(this).find("img")[0];       if($(this).children().attr("href")==document.location.href){          $(pth).attr("src",pth.src.replace(/.gif/g, '_over.gif'));          } else{             $(this).hover(function(){               $(pth).attr("src",pth.src.replace(/.gif/g, '_over.gif'));               },function(){                  $(pth).attr("src",pth.src.replace(/_over.gif/g, '.gif'));                  });       More >
, , , , ,