How toHow to make rollovers with jQuery

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");
            $("

").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 :

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

11 thoughts on “How to make rollovers with jQuery

  1. 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?

  2. 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

  3. @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.

  4. 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. !

  5. 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

  6. Hello, thanks for the time and effort you have put into this wonderfull plugin.

    I hope you can help me. When I hover the icons nothing happens. That could mean anything so where to start.

    I would like to show an enlarged version of the same icon when hovering.
    Not hovering: show photo.png
    Hovering: show photo_over.png

    1. The icons are in the same folder. wp-content/uploads/2009/09
    called photo.png (for the small icon) & photo_over.png (for the normal icon)
    I uploaded the icons in the settings panel of the plugin.

    2. With Firebug I found: id=”caticons-3″>h2>ul>li>a>img

    In my rollover.js file I changed the id to #caticons-3 h2>img and #caticons-3 h2>a

    li.cat-item>a still is the same though this also has the new caticons-3 id. But as this id is not used in the rollover.js file I did not change anything.

    My rollover.js file is in the js folder of my theme folder. I changed the function like so:
    ‘/wp-content/themes/MFW/js/rollover.js’);

    Can you please give me some advice where to start looking for the problem?

    Thx for your help!

  7. Hello, it doesn’t work:

    My code is:

    div class=”header”>

    What is the right css-sequence for:


    Query(function($) {
    $(document).ready(function(){
    // Posts
    $(“#content h2>img”).each(function () {
    rollsrc = $(this).

  8. Hello, it doesn’t work:
    My code is:

    What is the right css-sequence for:


    Query(function($) {
    $(document).ready(function(){
    // Posts
    $(“#content h2>img”).each(function () {
    rollsrc = $(this).

  9. Hello, it doesn’t work:
    My code is:
    // div class=”header”
    // ul style=”list-style-type:none; margin:0px; padding-bottom:0px; line-height:0px;”

    /ul
    img”).each(function () {
    rollsrc = $(this).

  10. I can’t help you on that. This is specific to your template & css. I hope you’ll understand. Firebug is a great tool to find the ‘css sequence’.