Servus miteinander!

Da ich heute festellen durfte, dass Checkboxen in Sachen Design sehr widerspenstig sind, und sich nicht so anpassen lassen wie ich dass möchte, so will ich die Checkboxen gerne durch Grafiken ersetzen.
Ich habe schon ein wenig gegoogelt, und auch hier im Forum mal nach meinem Problem gesucht. Leider trug meine Suche keinen Erfolgt.

Da ich mich aber schon ein klein wenig mit JavaScript auskenne, habe ich schon mal ein wenig rumprobiert:

HTML-Code:

<script language="javascript" type="text/javascript">
<!--
function ChkBMouseOver ()
{
	if(document.getElementById('checkboximg').src == 'checkbox1.png')
	{
		document.getElementById('checkboximg').src = 'checkbox2.png';
	}
	else if(document.getElementById('checkboximg').src == 'checkbox3.png')
	{
		document.getElementById('checkboximg').src = 'checkbox4.png';
	}
}

function ChkBMouseOut ()
{	
	if(document.getElementById('checkboximg').src == 'checkbox2.png')
	{
		document.getElementById('checkboximg').src = 'checkbox1.png';
	}
	else if(document.getElementById('checkboximg').src == 'checkbox4.png')
	{
		document.getElementById('checkboximg').src = 'checkbox3.png';
	}
}

function ChkBClick ()
{
	document.getElementById('checkboximg').src = 'checkbox3.png';
	
	if(document.getElementById('checkboxhf').value == 0)
	{
		document.getElementById('checkboxhf').value = 1;
	}
}
//-->
</script>

Hat leider ab nicht so funktioniert wie ich das möchte.

Kleine Info am Rande:

Ich habe insg. 4 Grafiken: 1. Checkbox normal, 2. Checkbox mouse over, 3. Checkbox checked, 4. Checkbox checked mouse over

Ich arbeite hier auch mit einem hidden-input. Leider hat nichts funktioniert.

Ich Bitte daher um eure Hilfe. Vielleicht könnte mir ja jemand einen kleinen Scriptschnipsel bereitstellen?