Question

I wrote code first without using functions to prototype, and of course, it worked fine:

$(function() {
    $(".PortfolioFade img")
        .mouseover(function() { 
            popup('PORTFOLIO');
            var src = $(this).attr("src").replace("images/paperclip.png", "images/paperclip-black.png");
            /*var src = $(this).attr("src").match(/[^\.]+/) + "-black.png";*/
            $(this).attr("src", src);
        })
        .mouseout(function() {
            ;
            /*var src = $(this).attr("src").replace("images/paperclip-black.png", "images/paperclip.png");
            $(this).attr("src", src); Look at popup.js mouseover events*/ 
        });
    });

However, when I expressed the same in function form, the function call didn’t seem to work.

$(document).ready(function() {
   // put all your jQuery goodness in here.
   $('body').hide().fadeIn(1000);

    function ImageRollover(image_element, popup_name, original, replacement)
{
    $(element)
        .mouseover(function(){
            popup(popup_name);
            var src = $(this).attr("src").replace(original,replacement);
            $(this).attr("src",src);

        })
        .mouseout(function(){
            ;
        });
}

   ImageRollover(".Portfolio img",'PORTFOLIO',"images/paperclip.png","images/paperclip-black.png"); 
 });

Defining the function elsewhere didn’t seem to have any effect either.

Answer 1

Your function is defining the first variable as image_element, but you’re referring to it as just element in the code. That’s quite likely one factor to it not working.

You’ll likely also encounter an issue with the keyword this inside your function. It isn’t referring to the same object as in the original code (which jQuery sets to the HTML element for you). In your function, it is likely not being set to anything thus it’s a link to window.