I basically want to have a small thumbnail of an image, and when the user puts the mouse over the image I want a larger version to pop-up. I've been doing some Google and I found this tutorial.

I cant make sense of the code. Which file should I put it in?

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);


Is there a plugin that already does this, or is there an easier way to do this? Thank you in advance for the help.

1 Answer 1


you should put that in the functions.js file (create it if it does not exist), and make sure it is embedded in your wordpress site with wp_enqueue_script in your functions.php file in your theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.