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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…