This article is an expansion upon my last article which discusses how to set up jQuery in WordPress. In this article, you will learn how to create a simple rollover image using jQuery.
First of all, you need to have your images created of course. For the sake of this article, the images should be named imagename.png, and imagename-hover.png (or any other picture file extension).
As you learned in the previous article, you need to enclose your jQuery function in a special function of its own.
This is called from an external .js file, and will work for any images inside of a div called #quote (or whatever fits your website).
jQuery(function($) { <--This is the enclosing function $(document).ready(function(){ <--This is the overall jQuery function $("#content #quote img").each(function () { <--This function determines img src rollsrc = $(this).attr("src"); rollON = rollsrc.replace(/.png$/gi, "-hover.png"); $("<img>").attr("src", rollON); }); $("#content #quote a").mouseover(function () { <--This displays the -hover image imgsrc = $(this).children("img").attr("src"); matches = imgsrc.match(/-hover/); if (!matches) { imgsrcON = imgsrc.replace(/.png$/gi, "-hover.png"); $(this).children("img").attr("src", imgsrcON); } }); $("#content #quote a").mouseout(function () { <--This returns the image to normal $(this).children("img").attr("src", imgsrc); }); }); });
The first part of each of the 3 functions that actually change the image contain a css path to the hyperlink (‘a’ tag). This will vary depending on the structure of your website. A good way to find the css path is to use the Firefox plugin called FireBug.
I hope this helps other developers in their WordPress and jQuery endeavors!
Tags: JavaScript, jQuery, WordPress
Very useful. Thank you!
I’m glad that you found my article helpful
Isn’t this bad for the SEO? That Google won’t find your text in the menu?
That’s a good question, and the answer is yes. You would not want to use a technique like this for main navigation items. In the case of my website it works fine for me because the two images I use the rollover script with are in addition to regular text links to those pages. They are for the reader, not the search engine.
If you are looking for a way to do rollovers for links that are Search Engine friendly, you should look into using CSS and the a:hover attribute. This can be used to replace the background-image behind a text link. The top navigation menu on my website uses this technique. Pretty soon CSS3 will be viable though, so I can use CSS for rounded corners instead of images!
If you have further questions I will be happy to answer them!
[...] tutorial i browsed swiftly a while ago … hopefully it helps you out … (this one uses jQuerry) Simple Image Rollovers in WordPress with jQuery – Kalamazoo Web Design and Development Professional … (this one uses CSS) WordPress › Support Rollover buttons breaking menu, not following [...]
[...] http://www.frodesigns.com/2009/07/wordpress-jquery-image-rollovers/ [...]
Keep up the interesting posts. I love to see keen bloggers!
Super-Duper site! I am loving it!! Will come back again – taking your feeds too now, Thanks.
Excellent site, keep up the good work. I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog. Thanks,
A definite great read..
-Bill-Bartmann
Thank you very much for that wonderful piece of text.
[...] Originally posted here: Simple Image Rollovers in WordPress with jQuery [...]
[...] Learn how to create the rollover functionality! Share and [...]