Posts
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.
- 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.
- put your image in your HTML document.
- put all your image in normal state. remember to keep the active state image in same folder.
- include jquery latest script from jquery website and include script on your head section.
- copy below code and paste after jquery include. (you can put this code in common include file and include after jquery include.)
- 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.
If I replace all of the “gif” with “jpg” should it work with jpgs as well, or only gifs?
yes you can use jpg also change gif to jpg in code
Hi Pankaj, your code works great….
Sorry for my English and my ignorance in Js!
I’m trying to use it associated to a tabbed menu…
In this way the href for my image isn’t a new file but a div inside the document
So the line of your code that controls what image has to remain active does’t work…
if($(this).children().attr(“href”)==getLeaf(document.location.href))
and the rollover nerver stop (for the active link)….
So how can I change this line? (if it’s the right thing to change…)
Thank you very much
Elisa
are you creating a accessible tab like if you click on tab page url is like xyz.com/#tabname if so u can modify function getLeaf(url).
can you send me link of your page so i can provide a solution.
Thank you very much Pankaj!
The link for the page is
http://www.elisamonti.com/sviluppo/
Elisa
change
to
I hope this work for you.
Thank you very much…
I think there’s one more problem….
At the first loading the first panel is selected and the relative image link is correctly active…
Unfortunately when you click on other sections the correct section is loaded but the rollover isn’t correct….
Now i’ve uploaded the new version at http://www.elisamonti.com/sviluppo
Can you give me one more help? (if you can obviously)
…thank you so much…
Elisa
Can the image be called from the css instead of the html?
In css you can use css property for that
OMG, i have been searching for days and couldn’t find a simple answer to this. Thank-you so much! Just a quick question though… jquery look for the image within a div in the html. Is is possible to have it so it calls the image from css? I’m selling themes that are digitally downloaded and therefore i don’t want to include the http://mysite/image and would like to know if it can be done where it calls the image from the css eg. .mydiv { background:url ../styleImages/buttons/LPmore2.gif) no-repeat; }
Thanks
Jessie
Hi Pankaj,
Thank you for this code. It’s exactly what I have been looking for. In fact I can think of lots of situations when this could be very useful.
I was able to implement it with no problem, and the rollover effect works great.
For some reason the current page effect is not working on my site. I was hoping that you might offer some advice.
Here is the situation: It’s a wordpress site. I’m using list style navigation. Here’s a little bit of list nav code:
2
3
4
5
6
<ul>
<li><a href="<?php bloginfo('wpurl'); ?>"><img alt="" height="36px" src="<?php bloginfo('template_url'); ?>/images/home.gif" width="58"/></a></li>
<li><a href="<?php bloginfo('wpurl'); ?>/category/blog/" ><img src="<?php bloginfo('template_url'); ?>/images/blog.gif" height="36px" width="61" border="0"/></a></li>
Your demo works great, so the issue is with my implementation.
I get rollover when I call (#nav ul li) or (#nav ul li a). But neither way gives results in a current page effect.
Any advice on how to proceed with troubleshooting?
Change Line 4 in my code
change to
use at (#nav ul li)
Let me know its working?
Thank You!
That was the perfect fix.
I’ve bookmarked your blog, and look forward to reading more of your posts in the future.
An easier way to do this might be to make two images, one with a suffix “_on” and the other with the suffix of “_off”. Then paste this code
[code]
$(function() {
$("img.rollover").hover(
function () { this.src = this.src.replace("_off","_on");
},
function () { this.src = this.src.replace("_on","_off");
}
);
});
[/code]
And then you can just call rollovers on an image by adding ‘class=”rollover”‘, like
[code]
[/code]
you can see there are some other functionality in above script which is added.
Thanks for your contribution for easier version.
FANTASTIC!