[SOLVED] making a div rollover

[Jago6060]

I have <div>'s setup to act as buttons, but I can't get them to change background and font color when I mouseover them. heres my functions...

 

<SCRIPT LANGUAGE="JavaScript">
function buttonOn(obj){
        document.style.backgroundColor='#FFFF99';
        document.style.font='#000060';
}
function buttonOff(obj){
        document.style.backgroundColor='#000060';
        document.style.font='#FFFF99';
}
</script>


the div within the page...

<a href=index.html target="_parent"><div id=button onMouseOver=buttonOn(this) onMouseOut=buttonOff(this)><>
Home
</div></a>


and here is the css for the div...

#button 	{
	background: #000060;
	font-size: small;
	font-family: "Tahoma";
                          color: #FFFF99;
	width: 212px;
	height: 24px;
	padding-top: 12px;
	padding-left: 10px;
                          padding-bottom: 8px;
	margin-left: 1px;
                          margin-top: 1px;
                          margin-bottom: 1px;
	}

 

(im a noob as far as JavaScript goes :-p)

[nogray]

change the document.style. in your functions to obj.style (since you're passing the object to the function)