jQuery Navigation - how to set all other buttons to off state

JavaScript
1

I’ve built a navigation bar that has 3 states to the button. off, hover, selected.

I have the images preloading (its 3 seperate images).

I have the mouseover effect working - using .hover and str.replace argument to replace -off with -hover.

I have the selection working as well - when i click a thumb it replaces -hover with -selected (and loads the correct image in both case).

Now the problem: When i click the first thumbnail it becomes selected and is also going to do other things too - like tell flash to play a movie etc. But when i click the next thumbnail the first one stays selected. Now i have two buttons selected. If i click the 3rd it also becomes selected.

What can i add to my script that will reset all buttons except the one currently selected ?


// preload images first (can run before page is fully loaded)
$.preloadImages("images/btn001-hover.jpg", "images/btn001-selected.jpg");
$(
	function()
	{
		// set up rollover
		$("img.rollover").click(function ()
		{
			this.src = this.src.replace("-hover","-selected");
		});
		
		$("img.rollover").hover(
			function()
			{
				this.src = this.src.replace("-off","-hover");

			},
			function()
			{
				this.src = this.src.replace("-hover","-off");
			});
		return false;
		
	});

Thanks in advance!

2

An easy way is to just change all the src’s to thier “unselected” state, and after that’s done, change the clicked button to its “selected” state. Do this when the click event occurs.

3

I’ll try that, but i think i have this mostly solved.

I found a script that I had used before but it was a long time ago called smartroll.js - great script for making 3 state buttons.

Get smartroll.js from: Scripterlative.com

But it doesn’t look like it is playing well with jQuery + easySlider.js script.

For whatever, when i click one of my buttons it sticks on the hover state - at least it sticks but i really wanted that 3rd state in there.

Am trying to move all of the different js files to the bottom of my page so maybe smartroll can load first and then easySlider.

Now just looking for a sliding script that will play nice with smartroll.js. Though i’d really like to do all of this with jquery.

4

This tutorial has been for me the best one I’ve come across when it comes to 3-state rollover menus.

There is no image loading delay, and it even works when scripting is not available.

5

yes, that way is pretty basic. But what i am trying to achieve is a menu that will work without going to different pages. So if i hover a thumbnail it should show the hover, if i click it should show the active state, if i hover another thumb the hover state should show, if i click it it should show the active state and the other active state thumbnail should turn back ot the off state. But i am never leaving that page.

Its a little tricky and i thought i had it sorted out but now I see in IE7 the menu isn’t working anymore – jquery isnt happy with the other javascript script.

so i might use jCarousel for the scrolling and then i am trying to find a Three state menu jquery script.