CODEWITHSUNDEEP
javascriptjquery
Louis93
Louis93

Reputation: 3921

My function calls are not working?

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.

Upvotes: 1

Views: 158

Answers (3)

Dips
Dips

Reputation: 3290

Is this what you are trying to achieve?

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

        })
        .mouseout(function(){
            $(this).attr("src",original);
        });
}

http://jsfiddle.net/SqyDg/

Upvotes: 3

DaneSoul
DaneSoul

Reputation: 4511

    function ImageRollover(image_element, popup_name, original, replacement)
{
    $(element)

Where element is defined?

May be you mean:

    function ImageRollover(image_element, popup_name, original, replacement)
{
    $(image_element)

Upvotes: 2

Eli Sand
Eli Sand

Reputation: 1032

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.

Upvotes: 2

Related Questions