<div id="options">
<div id="option_one">This is option one</div>
<div id="option_two">This is option one</div>
<div id="option_three">This is option one</div>
</div>
The way it would work is there would be mouseover properties for each option, and when selected the style would change, and somehow it would save the selected div id's to an array....
Sorry if this isn't very clear... but if anyone as any ideas how to do this or if there is a jquery plug in that will do this.. I'd really appreciate it! Thanks.
var checkedItems = new Array();
$("#options div").toggle(
function(){
$(this).attr('className','checked');
var clickedID = $(this).attr('id');
checkedItems[clickedID] = clickedID;
},
function(){
$(this).removeClass('checked');
var clickedID = $(this).attr('id');
checkedItems[clickedID] = false;
});
});
If you're only using modern browsers, you can set the hover states in CSS like how ~JAB showed you. IE6 doesn't allow :hover pseudo-selectors for anything other than 'a' tags however, so if IE6 is in your target audience, you'll have to use JS for that too.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
var checkedItems = new Array();
$("#options div").toggle(
function(){
$(this).attr('className','checked');
var clickedID = $(this).attr('id');
checkedItems[clickedID] = clickedID;
},
function(){
$(this).removeClass('checked');
var clickedID = $(this).attr('id');
checkedItems[clickedID] = false;
});
});
If you're only using modern browsers, you can set the hover states in CSS like how ~JAB showed you. IE6 doesn't allow :hover pseudo-selectors for anything other than 'a' tags however, so if IE6 is in your target audience, you'll have to use JS for that too.
Thanks! How do I serialize this though? When I try to alert the checkedItems array, it returns nothing.