recommend a javascript technique for this?

[decksnap]

Can anyone recommend a tutorial or some direction for a jquery or scriptaculous method of doing the following?

mockup

Based on the mockup above, for the main feature area, (not the main l1 nav) I need to:
• swap to a different div on the left side when you click on a nav item on the right
•*Swap the nav item graphic (or css background image position preferably) of each nav item when you hover AND when you click on them.

I've done the div swap successfully before, as well as regular css-based rollovers. The issue I'm having is combining the standard css rollover with getting the nav items to stick 'on' when clicked.

 

[angelwatt]

If you want a pure CSS way, take a look at this photo gallery from CSS Play. It has hover effects, plus it will keep the clicked content on-screen after off hover.

A JavaScript method would involve adjusting the CSS for your different div, changing display to none and the hovered one to block. You can probably locate a tutorial for this.

 

[decksnap]

thanks - I did want to use JS for the fade effect. I've got a version working now that does everything but leave the nav button in the on state. Wondering now if that's really necessary or not:

link

 

[angelwatt]

That looks pretty good, but just remember that those like me who disable JavaScript by default won't get anything when clicking on those as they are. Make sure to either have the links go to another page with actual details, or have all the information available without JavaScript enabled.

As for the leave "on" I believe you can accomplish that with some CSS. In addition to the a:hover, use a:focus and a:active. I believe that should do it.

#hf-mastering a:hover,
#hf-mastering a:active,
#hf-mastering a:focus {
 ...
}

 

[decksnap]

thanks- I'll try this when I'm back in the office.

So... then how to go about causing these to link to separate pages only IF js is disabled?

 

[angelwatt]

So... then how to go about causing these to link to separate pages only IF js is disabled?

At the end of the JavaScript you already have it has a "return false" portion. This keeps the link from executing. Thus, it's already taken care of and setup for visitors without JavaScript enabled. Just fill in the href portions of the links and those will only ever activate when a person doesn't have JavaScript enabled.

To confirm that's what happens, click on one of the side items and note that the URL doesn't change at all. Now disable JavaScript and refresh the page and click on one of the items. This time you'll notice a # is added to the end of the URL.