Question

I used to have something like this:

$(function() {
$(".PortfolioFade img")
    .mouseover(function() { 
                    popup('PORTFOLIO');
                    var src = $(this).attr("src").replace("images/paperclip.png", "images/paperclip-black.png");
        $(this).attr("src", src);
    })
    .mouseout(function() {
                    ;
    });
    });

And when I tried to turn this into a function and call it, it didn’t work at all. The image was not replaced.

The following is the function and following call that did not work, and I am at a loss as to why it didn’t work.

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

   //Changing Fonts
   function changeFont(element, fontFamily, fontSize)
{
    $(element).css("font-family", fontFamily);
    $(element).css("font-size", fontSize);
}
    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(){
            ;
        });
}

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


 });

Answer 1

EDIT: Sorry, what I should’ve seen in the first place was that your ImageRollover() function declares a parameter image_element but then within the function you use element. So within the function change:

$(element)
    .mouseover(function(){

To:

$(image_element)
    .mouseover(function(){

(And forget about what I said before.)

What your original version had but the new version doesn’t is a document ready handler. Try putting the call to your ImageRollover function in a document ready as follows:

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

You can’t attach event handlers to elements that have not yet been parsed – the document ready handler is not called until the whole document has been parsed so at that point you can attach event handlers. Alternatively you can put your script somewhere after the elements it operates on, e.g., at the end of the body.

I’d be inclined to move the ImageRollover function declaration into the document ready too, just to keep it out of the global namespace (assuming you only call it from within the document ready), though this isn’t necessary to make it work.