Jquery Sliding Panels Active Link...Javascri pt or CSS?

[Sarah Hammond]

Hello There,
I am using jquery Spry Sliding panels for a new site i am working on. I am looking to style similarly to this example in particular I am trying to find a way to give the navigation links (which will eventually be imgs) an active state (whichever link is currently selected-I wish it to have a different image and same for mouseover) as on the coda website.

I'm quite new to javascript, and having read similar articles on the forum have tried different suggestions, but as my mark-up is quite different in the first place to these with similar problems, haven't been able to find a solution for myself.

From looking at my mark-up below, would the best solution be to use CSS or javascript or both to allow for different active link states?

Here is my html script for the navigation:

Navigate by index: 
<a href="#" onclick="sp2.showPanel(0); return false; switchColors(this,'green'); ">ssdfsdfsdfsll</a> |
<a href="#" onclick="sp2.showPanel(1); return false;">Engineering & Environmental</a> |
<a href="#" onclick="sp2.showPanel(2); current = $this.parent().index();
return false;">Financial</a> |
<a href="#" onclick="sp2.showPanel(3); return false;">Sustainability</a> |
 

Here is the page is it stands (excuse the lack of design!)
Here is the SprySlidingPane ls.js

Many Thanks in advance to anyone who can help me find a solution.

Best,
Sarah

[RamananKalirajan]

You can do that easily. You have to use Javascript and little bit of HTML Codes to develop it. If you are using table kind of stuff. Have a table with three columns. In the tr specify the valign as middle. In the first and last column. Have image for previous and next. In the center have the td with the div which you are currently using to show the slide content. On the image call the method you are calling for slide.

If you are using div for layout and all means you have to use some css and place 3 div's with same as table.

Thanks and Regards
Ramanan Kalirajan