Link to reflect radio button selection

Hi there,

I have a quick question about a little piece of code that I'm trying to figure out.

I am trying to get a css-styled button to stay on its 'roll-over' state once it has been selected by its corresponding radio button (connected via the label tag). So far, I have no idea what I'm doing.

Here's what I have so far:
http://www.kinkarso.com/testing/index.html

This is what it's doing:
http://is.gd/d6W4w

This is what I'd like it to do:
http://is.gd/d6W3m


Any experts out there that can lend a hand :0?

Thanks!
Donny

 

Try to use jquery. Here is an example.

In a nutshell, what it does, is that it travels to the significant parent node ( from where the other button wrappers can be considered siblings, "td" in your case ) and there adds a class "active" on change - and at the same time removes the class "active" from all the other siblings, if they have it.

And there the definition of ".active a" shares with a:hover so you get the desired behavior...

<style>
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333333
}
a.button {
	display: block;
	width: 173px;
	height: 132px;
	padding: 35px 20px 10px 85px;
	color:#666666;
	text-decoration: none;
	background:url(http://www.kinkarso.com/testing/yes.png) no-repeat 0px 0px;
}
a.button:hover, .active a.button {
	color:#333333;
	background:url(http://www.kinkarso.com/testing/yes.png) no-repeat 0px -176px;
}
a.button2 {
	display: block;
	width: 173px;
	height: 132px;
	padding: 35px 20px 10px 85px;
	color:#666666;
	text-decoration: none;
	background:url(http://www.kinkarso.com/testing/no.png) no-repeat 0px 0px;
}
a.button2:hover, .active a.button2 {
	color:#333333;
	background:url(http://www.kinkarso.com/testing/no.png) no-repeat 0px -176px;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">

jQuery(function($) {
	$("input[id=radio]").change( function() {
});
	

</script>		var sel = $(this).parent().parent();
		sel.addClass("active");
		sel.prevAll().removeClass("active");
		sel.nextAll().removeClass("active");
	});	
});
	

</script>

HTML:

PS: It is more efficient, and safer to download a copy of jquery from the abovementioned link and host it on your website rather than fetching it from public sources.

The links in the style definition can be changed back to relative.

 

This is just what I was looking for. Thanks!