[lewisstevens1]

Im having a bit of problem with this script, all its ment to do is highlight images on hover then switch class. Also there's a div which changes display depending on which button is selected. Im not great with javascript and would like a bit of help.

I created the i variable so that i could reference that depending which button is pressed (i.e 0,1,2,3). If i change the variable to any of those numbers it works and the image changes and sets its value, although what im having trouble with is it doing it dynamically and when clicked it updates that variable.

i tried adding
i = 1;
return;

although i don't think that changed anything...
i dont even know why i cant alert a function eg.

<script>
function helpme() { alert("hello"); }
</script>

<input type="button" onClick="helpme()" value="submit me"/>

--------------------------------------


Heres the code for what im trying to get working:

<script>
$(document).ready(function()
{
	var i = $(this).val();
	
	$("#button_intro").click(
		function(){
			$("#white_content_1").css("display","block");
			$("#white_content_2").css("display","none");
			$("#white_content_3").css("display","none");
			$("#white_content_4").css("display","none");
		}
	);
	$("#button_startup").click(
		function(){
			$("#white_content_1").css("display","none");
			$("#white_content_2").css("display","block");
			$("#white_content_3").css("display","none");
			$("#white_content_4").css("display","none");
		}
	);
	$("#button_small").click(
		function(){
			$("#white_content_1").css("display","none");
			$("#white_content_2").css("display","none");
			$("#white_content_3").css("display","block");
			$("#white_content_4").css("display","none");
		}
	);
	$("#button_large").click(
		function(){
			$("#white_content_1").css("display","none");
			$("#white_content_2").css("display","none");
			$("#white_content_3").css("display","none");
			$("#white_content_4").css("display","block");
		}
	);

	if (i == 0){
		$("#button_intro").addClass('selected');
		
		$("#button_startup").hover(	
			function(){$("#button_startup").addClass('selected');
			},
			function(){$("#button_startup").removeClass('selected');
			});
		$("#button_small").hover(	
			function(){$("#button_small").addClass('selected');
			},
			function(){$("#button_small").removeClass('selected');	
			});
		$("#button_large").hover(	
			function(){$("#button_large").addClass('selected');	
			},
			function(){$("#button_large").removeClass('selected');	
			});	
			
			
		} else if (i == 1) {
		$("#button_startup").addClass('selected');
		
		$("#button_intro").hover(	
			function(){$("#button_intro").addClass('selected');	
			},
			function(){$("#button_intro").removeClass('selected');	
			});
		$("#button_small").hover(	
			function(){$("#button_small").addClass('selected');
			},
			function(){$("#button_small").removeClass('selected');	
			});
		$("#button_large").hover(	
			function(){$("#button_large").addClass('selected');	
			},
			function(){$("#button_large").removeClass('selected');	
			});	
			
	} else if (i == 2) {
		$("#button_small").addClass('selected');
		
		$("#button_startup").hover(	
			function(){$("#button_startup").addClass('selected');
			},
			function(){$("#button_startup").removeClass('selected');
			});
		$("#button_intro").hover(	
			function(){$("#button_intro").addClass('selected');	
			},
			function(){$("#button_intro").removeClass('selected');	
			});
		$("#button_large").hover(	
			function(){$("#button_large").addClass('selected');	
			},
			function(){$("#button_large").removeClass('selected');	
			});	
	} else if (i == 3) {
		$("#button_large").addClass('selected');
		
		$("#button_small").hover(	
			function(){$("#button_small").addClass('selected');
			},
			function(){$("#button_small").removeClass('selected');	
			});
		$("#button_startup").hover(	
			function(){$("#button_startup").addClass('selected');
			},
			function(){$("#button_startup").removeClass('selected');
			});
		$("#button_intro").hover(	
			function(){$("#button_intro").addClass('selected');	
			},
			function(){$("#button_intro").removeClass('selected');	
			});
	};
});
</script>

<div style="height:24px; border-bottom:3px solid #94A942;">
		<img src="images/buttons/button1.png" alt="Buttons" id="button_intro" value="0" class="not_selected"/>
		
		<img src="images/buttons/button2.png" alt="Buttons" id="button_startup"  value="1"  style="margin-left:-13px;" class="not_selected"/>
		
		<img src="images/buttons/button3.png" alt="Buttons" id="button_small" style="margin-left:-13px;"  value="2" class="not_selected"/>
		
		<img src="images/buttons/button4.png" alt="Buttons" id="button_large" style="margin-left:-13px;"  value="3" class="not_selected"/>
		
	</div>
	<div class="white_section" style="border-top:0px; height:244px">
		<div id="white_content_1">
			Intro
		</div>
		<div id="white_content_2" style="display:none">
			Startup 
		</div>
		<div id="white_content_3" style="display:none">
			Small
		</div>
		<div id="white_content_4" style="display:none">
			Large
		</div>
		
	</div>

Thankyou for any help you can give.
Lewis Stevens