Pankaj Pandey » navigation http://www.pankajpandey.com Web design & Internet Marketing Consultant Thu, 19 Jan 2012 07:54:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Jquery Image rollover with demohttp://www.pankajpandey.com/2009/03/jquery-image-rollover-with-demo/ http://www.pankajpandey.com/2009/03/jquery-image-rollover-with-demo/#comments Mon, 23 Mar 2009 22:09:01 +0000 Pankaj http://www.pankajpandey.com/?p=79 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
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.

]]> http://www.pankajpandey.com/2009/03/jquery-image-rollover-with-demo/feed/ 19 Jquery Image rolloverhttp://www.pankajpandey.com/2009/02/jquery-image-rollover/ http://www.pankajpandey.com/2009/02/jquery-image-rollover/#comments Sun, 15 Feb 2009 14:26:14 +0000 Pankaj http://pandey.ws/pankajblog/?p=49 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jQuery.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'));
                 });
            }
            });
    }
});
$(function() { $("#nav li").enter();});

I have created this script for dot net development where navigation is in master page. So I have highlighed current page with if condition on line 5 on code ($(this).children().attr(“href”)==document.location.href). i have used gif images you can change code according to your image format.

]]> http://www.pankajpandey.com/2009/02/jquery-image-rollover/feed/ 0