Javascript If/Else statement change img src

Question

I've got a drop functioning dynamic drop down menu that I'd like to add a little more functionality to. The menu is the page navigation and hovering over a link changes the source of an image in the content area, reflecting the active link. It's a simple attr(src) change.

I've added some code to fade the active image out, change the source back to the default, and fade it and back in upon leaving the menu, but would like to frame that code within an If/Else statement; preventing the image from fading out and back in if it's source is unchanged from the default.

The syntax seems correct, but the function is not working correctly. I'm relatively new and am likely missing something. I'd greatly appreciate any advice for functional, more reliable code!

Thank you for your time, Daniel

The function embedded within the else statement (fade out, change source, fade in) works as I'd like it to.

$("#trigger").mouseleave(function(){
    var img = $("#img_home");
    if (img.src = "Images/IMG_4663_bw.jpg"){
      img.noop();
    } else {
      img.fadeOut(1000, function(){
         img.attr("src","Images/IMG_4663_bw.jpg");
         img.fadeIn(1000);
      });
    }
});

jQuery doesn't quite qualify as backend development, it's still very front end. ;-) — deceze
– deceze ♦, Commented Jan 4, 2011 at 23:40
I cannot believe that the title of this question is "jQuery if/else" - it's not jQuery - it's JavaScript!! — Jacob Relkin
– Jacob Relkin, Commented Jan 4, 2011 at 23:41
Sorry Jacob, just jumped in the pool. Using a jQuery library... but what do I know :) — technopeasant
– technopeasant, Commented Jan 4, 2011 at 23:48

deceze · Accepted Answer · 2011-01-04 23:35:21Z

3

if (img.src = "Images/IMG_4663_bw.jpg")

You're assinging the value, you need the == operator, not the = operator.
If you're only looking for the else condition though, just inverse the condition:

if (img.attr('src') != "Images/IMG_4663_bw.jpg") {
    // fade and stuff
}

answered Jan 4, 2011 at 23:35

deceze♦

525k89 gold badges806 silver badges954 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

technopeasant Over a year ago

Worked like a charm! I appreciate your time and effort very much.

SLaks · Accepted Answer · 2011-01-04 23:34:17Z

1

img is a jQuery object.
You need to access its attributes by calling img.attr('src').

Your if condition assigns the img property; to check for equality, you need to use the == (equality) or === (strict equality) operators.

jQuery's noop method is a static method; you call it by writing jQuery.noop().

Finally, there's no point in calling noop() at all. First of all, there's nothing wrong with an empty pair of braces with no statements inside: if (something) { } else { ... }.
Also, you can just invert the if condition and get rid of the else:

if (img.attr("src") === "Images/IMG_4663_bw.jpg") {
  img.fadeOut(1000, function() {
     img.attr("src", "Images/IMG_4663_bw.jpg").fadeIn(1000);
  });
}

answered Jan 4, 2011 at 23:34

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

user113716 · Accepted Answer · 2011-01-04 23:33:12Z

0

Syntax is incorrect. You need == in the if() statement instead of =, which does an assignment instead of a comparison.

Also, in order to directly access the src property, you need to do it from the DOM element. You can use [0] to get the first img from the jQuery object.

if (img[0].src == "Images/IMG_4663_bw.jpg"){
    $.noop(); // The noop is called from the global jQuery object.
    //...

answered Jan 4, 2011 at 23:33

user113716

323k64 gold badges454 silver badges441 bronze badges

Comments

Chandu · Accepted Answer · 2011-01-04 23:35:17Z

0

Try

$("#trigger").mouseleave(function(){
var img = $("#img_home"); 
 if (img.src == "Images/IMG_4663_bw.jpg"){
  img.noop(); 
 } 
 else {
  img.fadeOut(1000,function(){
  img.attr("src","Images/IMG_4663_bw.jpg");
  img.fadeIn(1000); 
  }); 
 } 
});

The difference is comparing that source with the image path string. It should be ' == '

edited Jan 4, 2011 at 23:35

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

answered Jan 4, 2011 at 23:32

Manny Calavera

6,89320 gold badges63 silver badges88 bronze badges

1 Comment

Manny Calavera Over a year ago

Right, didn't noticed the jQuery object as my eyes were fixed on that comparison :) .

Collectives™ on Stack Overflow

Javascript If/Else statement change img src

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related