Lansing Web Design and Development Professional

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!

When I was building this website, I wanted to add some simple hover effects, or image rollovers, to the home page of my site to enhance the look and feel of some of my buttons. I decided to use the jQuery JavaScript library to accomplish this. Now I have used jQuery in the past, and it is very easy to set up and use. Once I started working with WordPress and jQuery however, I discovered lots of fun little quirks.

First of all, it’s good to know that WordPress actually comes pre-bundled with jQuery. All you have to do is call it with a PHP command in your template’s header.php file like so (enclosed in php tags):

< ?php
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery-core-ui');
   wp_enqueue_script('jquery-tabs-ui');
   wp_enqueue_script('rollover', get_bloginfo('template_directory').'/rollover.js');
   wp_head();
?>

As you can see, the last one before wp_head(); is actually a custom JavaScript file stored in the template’s directory. This is where the jQuery code for the image rollover effect is stored.

A typical jQuery script is enclosed in a function like this:

$(document).ready(function(){
   jQuery script here
});

Secondly, you need to enclose your jQuery code in a special block to avoid conflict with other JavaScript libraries that come with WordPress. That is done like this:

jQuery(function($) {
   $(document).ready(function(){
      jQuery script here
   });
});

Following these simple steps should get your jQuery code to work within WordPress (provided your jQuery code is correct).

If anyone is interested in the code for getting image rollovers to work, please just leave a comment. I may be up for posting a tutorial for that in the future.

Next: Learn how to create the rollover functionality!