How to make rollovers with jQuery

Feed on: Posts; Comments

May 24th, 2008 by Sub

I’ve found a tutorial on Atlanta Jones. Read it, it’s worth it. Here is an example that works with the Default theme of WordPress and the Category Icons plugin with its Widget.

1. Create an empty file named rollover.js at the root of your theme folder.

2. Copy and paste this javascript code in rollover.js :

jQuery(function($) {
    $(document).ready(function(){
        // Posts
        $("#content h2>img").each(function () {
            rollsrc = $(this).attr("src");
            rollON = rollsrc.replace(/.png$/gi, "_over.png");
            $("<img>").attr("src", rollON);
        });

        $("#content h2>a").mouseover(function () {
            imgsrc = $(this).children("img").attr("src");
            matches = imgsrc.match(/_over/);
            if (!matches) {
                imgsrcON = imgsrc.replace(/.png$/gi, "_over.png");
                $(this).children("img").attr("src", imgsrcON);
            }
        });

        $("#content h2>a").mouseout(function () {
            $(this).children("img").attr("src", imgsrc);
        });

        // Sidebar
        $("li.cat-item>a").mouseover(function () {
            imgsrc = $(this).children("img").attr("src");
            matches = imgsrc.match(/_over/);
            if (!matches) {
                imgsrcON = imgsrc.replace(/.png$/gi, "_over.png");
                $(this).children("img").attr("src", imgsrcON);
            }
        });

        $("li.cat-item>a").mouseout(function () {
            $(this).children("img").attr("src", imgsrc);
        });
    });
});

Open the file functions.php of your theme, then copy and paste this at the beginning :

wp_enqueue_script('jquery');
wp_enqueue_script('caticons-rollover', get_bloginfo('template_directory').
                                       '/rollover.js');

and save the changes.

The script uses images that end with _over.png for the rollover images. Note that you can easily change the .png extension to .gif or .jpg in the script, if you want. If you want more details or just understand how it works, read the tutorial. Here are the images I’ve used to test it :

image 5 How to make rollovers with jQuery

Moreover, it depends on the CSS structure of your index.php and sidebar.php or the widget. I think it will work for the widget as it is, but if you change the theme, you’ll probably need to change also the lines that contain ‘#content h2>a’ and ‘#content h2>img’. If this is the case, I recommend you to experiment with the help of Firebug, a VERY good plugin for Firefox that will help you to find the exact ‘CSS sequence’. Here is how I’ve done to find ‘#content h2>a’ and ’#content h2>img’ :

1. In Firefox, activate Firebug then click on Inspect
2. Click on the category icon
3. Look at the CSS line

Click to enlarge

If you enjoyed this post, make sure you subscribe to my RSS feed!

Tags: css, firebug, icons, javascript, jquery, rollover
Posted in How to

6 Responses to “How to make rollovers with jQuery”

on 09 Dec 2008 at 21:591Chris

Great plugin man!

However I get one js error in admin.

jQuery(”div#slider1″).codaSlider is not a function
(no name)()category_icons-li… (line 2)
e(Object originalEvent=Event load type=load)jquery.js (line 11)
e()jquery.js (line 11)
[Break on this error] jQuery(”div#slider1″).codaSlider();

It’s from the file category_icons-links-panel.js
Any ideas?
on 07 Jan 2009 at 15:262Sub

Thanks. Have you tried to reupload the last version of the plugin ?
on 26 Feb 2009 at 11:393Michi

First of all thank you very much for this great plugin!
I tried to make rollover possible by using your solution with jquery, but somehow the icons disappear on mouseover and are not replaced with the _over.png icons. On Mouseout the original category buttons do not come back….
Could you maybe give me a direction or hint, how I could solve this problem? Any help would greatly be appreciated!
Thank you very much in advance
on 03 Mar 2009 at 20:424Sub

@Michi

Hi, and thank you for using my plugin.

1 : are you sure the icons are in the same folders as the originals or can be displayed ?
2 : try to work with Firebug to find the CSS sequence, like I did in the tutorial.
on 24 Mar 2009 at 7:335Richard

Chris

I had the same js error jQuery(”div#slider1″).codaSlider();
from the file category_icons-links-panel.js

I found that
wp_enqueue_script(’caticons-coda’, ‘/wp-content/plugins/category-icons/js/coda-slider.1.1.1.js’);
line in category_icons.php was commented out, not sure why.
After I removed the // the error went away
de-activate - edit - re-activate
All seems to work fine now.

I would like to know why it was commented out in the first place. !
on 24 Mar 2009 at 8:266Richard

Re: js error jQuery(”div#slider1″).codaSlider();

Having looked at http://www.ndoherty.com/blog/category/coda-slider

I just found that it may only have to do with the information panel..
function bm_caticons_display_infos_panel
yet //bm_caticons_display_infos_panel(); was commented as well,
so is the function needed?

ok I removed the function, and commented out both:

// wp_enqueue_script(’caticons-coda’, ‘/wp-content/plugins/category-icons/js/coda-slider.1.1.1.js’);

and

// wp_enqueue_script(’caticons-links-panel’, ‘/wp-content/plugins/category-icons/js/category_icons-links-panels.js’);

all seems to be working now.. and no errors, and a little less overhead

Trackback URI | Comments RSS

Category Icons