How can I swap a picture using javascript

Question

I've made this header: https://www.youtube.com/watch?v=LOWjWRy_Kks and at the place of the logo, I've inserted a picture, which is black.

When I scroll down, I want this image to be white (since the header turns black), so I've made a white version of the same image.

However I have no idea where to insert the image. I've been thinking about inserting it in the javascript code, which is the following:

    $(window).on('scroll', function() {
    if($(window).scrollTop()) {
      $('nav').addClass('black');
    }
    else {
      $('nav').removeClass('black');
    }
  })

How can I swap in this white image using javascript?

For a question to be well received on StackOverflow, you need to provide the mimimum complete code to see / recreate the situation. A video on YouTube to illustrate what you want is less than desirable. — random_user_name
– random_user_name, Commented May 19, 2018 at 13:15

Amar Kaygude · Accepted Answer · 2018-05-19 13:04:27Z

0

I have not executed this code but I saw the video and with that reference suggesting following code to satisfy your requirement.

<script type="text/javascript">
    $("#logoimageid").attr('src', 'blacklogo.jpg');//this will not required if default 'blacklogo.jpg' src alerady set in img tag 
     $(window).on('scroll', function() {
    if($(window).scrollTop()) {
      $("#logoimageid").attr('src', 'whitelogo.jpg');
    }
    else {
      $("#logoimageid").attr('src', 'blacklogo.jpg');
    }
  })
</script>

answered May 19, 2018 at 13:04

Amar Kaygude

2873 silver badges6 bronze badges

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

1 Comment

Máté Tóth Over a year ago

Hey! Thank you for your comment. I've tried it and it didn't work unfortunately. :(

Collectives™ on Stack Overflow

How can I swap a picture using javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related