I wrote a very simple little piece of JavaScript that changes the colour, background colour and font colour of a checkbox depending on the Mouse Event (onclick, onmouseover and onmouseout) and whether the checkbox is ticked or not. It can also reset it back to its previous settings too.
XHTML:
<label for="cb1" id="lb1" onclick="mouseToggle('cb1', 'lb1', '#000', '#fff', '#cccccc', '#000000', true)" onmouseover="mouseToggle('cb1', 'lb1', '#000', '#fff', '#cccccc', '#000000', true)" onmouseout="mouseToggle('cb1','lb1','#000','#fff','#cccccc','#000000', false)">
<input type="checkbox" name="test" value="Test Checkbox1" id="cb1"/>Test Checkbox1</label>
JavaScript:
function mouseToggle(checkbox,label,bgcolour,fontcolour,bgreset,fontreset,mouseIn){
if(document.getElementById)
{
var cb = document.getElementById(checkbox);
var label = document.getElementById(label);
if(cb.checked == false)
{
if( mouseIn == true )
{
label.style.backgroundColor = bgcolour;
label.style.color = fontcolour;
}
else
{
label.style.backgroundColor = bgreset;
label.style.color = fontreset;
}
}
}
}
Example:
Something similar was used for http://www.howdenparkcentre.co.uk





