Adobe Imageready Javascript Question

Hi guys, I am trying to achieve a setup similar to this website:
[URL=”http://deluxe-tabs.com”]Example Site[/URL]

Notice how once on mouseover the tab is swapped with a diff color and once you click on a tab, its brought forward?

Well I wanted to go a step ahead and make it so that on mouse over, not only did it swap the image but the images were layered to look like file folder tabs.

So far this is what I have managed to make with Imageready:

[URL=”http://www.aephemeral.com/tabs/Tabs.html”]Tabbed Navigation[/URL]

[URL=”http://www.aephemeral.com/tabs/tabs.zip”]Link to zip file with all my files[/URL]

**ONLY THE PRODUCTS LINK WORKS FOR TESTING PURPOSES**

I can achieve their design by just using javascript to swap images on mouse over and once that image is clicked; I would modify the page to be loaded example “products.html” and change the img src to the image that shows that tab as being brought foward.

The problem in doing that with my design is when the “products page is loaded, and I use the other navigation tabs, the “products tab” goes back to being at the back of all the tabs and it never comes back up to show the “products” page is the page the user is currently on.

I realize I need much more additional javascript than what imageready is giving me automatically.

In short what I want to get is:

How my page is working right now but when you click on tab, the associated page loads and that tab is brought forward.

Sorry this is so long and confusing.

Any suggestions would be appreciated.

Also in #JavaScript _↴