Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
515 views
in Technique[技术] by (71.8m points)

javascript - Changing img src in jQuery

I want an image to change once a user has scrolled down the page (the image is the same size, but different color):

HTML

<ul class="social-media-nav-center">
  <li>
    <a href="https://twitter.com/" target="_blank"><img id="twitter" class="small" src="path/to/image-icon.png" /> 
    </a>
  </li>
</ul>

jQuery

$(document).ready(function(){
  $(window).scroll(function(){      
    if($(window).scrollTop() > $(window).height()) {
      $("#twitter").attr("src", "../path/to/image-color-icon.png");
    }
  })
})

When I scroll down the page, the image is not recognizable, it just comes up as a question mark.

NOTE

The image paths are valid, trust me.

-

I feel it's a really simple fix, any ideas?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

check to

HTML

<ul class="social-media-nav-center">
  <li>
    <a href="https://twitter.com/" target="_blank"><img id="twitter" class="small" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRgdlWvqZIB0r6qkjFS_t9uMKD9gQIVMV3fE-Vw9BMoRfNEmJG2" /> 
    </a>
  </li>
</ul>

Jquqey

$(document).ready(function(){
  $(window).scroll(function(){      
    if($(window).scrollTop() > $(window).height()) {
      $("#twitter").attr("src", "http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg");
    }
  })
})

CSS

.social-media-nav-center{height:1000px;}

https://jsfiddle.net/yakcbanL/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...