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 include.)
  6. don’t forget to change “#nav td” with your a element parent element in below script.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function getLeaf(url) {
var splited=url.split('?');// remove all the parameter from url
url=splited[0];
return url.substring(url.lastIndexOf("/")+1);// return file name without domain and path
}

jQuery.fn.extend({
 enter: function() {//plugins creation
     return this.each(function() {
       var pth = $(this).find("img")[0];
      //alert($(this).children().attr("href"));
       if($(this).children().attr("href")==getLeaf(document.location.href)){// check that the link url and document url is same
           $(pth).attr("src",pth.src.replace(/.gif/g, '_active.gif'));
       } else{
               $(this).hover(function(){
                  $(pth).attr("src",pth.src.replace(/.gif/g, '_active.gif'));// mouse over Image
                  },function(){
                      $(pth).attr("src",pth.src.replace(/_active.gif/g, '.gif'));// mouse out image
                      });
               }
               });
     }
});
$(function(){  // Document is ready
 $("#nav td").enter();// call the function
});

Jquery Image rollover demo download Let me know if you are not able to implement this code. I will happy to assist you.

Print This Post Print This Post