jQuery / Javascript

[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

[devnull69]

"value" is not an attribute for <img> elements

Try this

$(document).ready(function() {
   $('.not_selected').click(function() {
      // extract the number from the src of the image
      var theNum = this.src.match(/\d/)[1];
      // hide all the divs in white_section first
      $('.white_section div').hide();
      // show only the one with the correct number
      $('#white_content_' + theNum).show();
      // add a new "fixed" class to the current element that cannot be removed on mouseleave
      // remove this class from all other <img> first
      $('.not_selected').removeClass('fixed');
      $(this).addClass('fixed');
   });
   $('.not_selected').hover(function() {
      $(this).addClass('selected');
   }, function() {
      $(this).removeClass('selected');
   });
});

You would need to introduce a new .fixed class that cannot be removed on mouseleave and that should have the same style as .selected (just add another class selector to the same CSS rule)

[lewisstevens1]

Ah thanks that worked but i did have to remove the
[1] from var theNum = this.src.match(/\d/)[1];
else it wouldn't work.

So why doesnt below work?

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

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

Thankyou for your help