更改页面滚动上的活动导航图像？

Question

I'm attempting to reproduce a similar navigation bar to what's used on this website: http://www.julisudi.com/ . The main effect I'm looking for is to have each image become active when the correct anchor is reached on the page.

I have seen this done with text via http://jsfiddle.net/Vandeplas/up4nu/150/ I have also created some images and use the following CSS to reproduce the 'change colour' effect when the image becomes active:

#mainmenu a img {
     position: relative;
     margin-bottom: -30px;
     margin-top: 5px;
}

#mainmenu a img:hover, #mainmenu a img.active{ 
     top: -31px;
}

The problem I'm having is replacing code in the jfiddle to make it work with images rather than text. If anyone could help that would be great!

Answer 1

You can use the id on any elements, it can be a <p> or an <img> .

In the menu, it doesn't matter if <a> is filled with text , img or both.

http://jsfiddle.net/up4nu/2682/