I have to write a function that causes a rollover behavior for 3 different div elements that when a mouse goes over, the size increases 25% larger font size and then goes back to normal when the mouse moves off of them.
Here is where I think I am messing up.
The function must receive two passed parameters that indicate the id of the div to be altered and the font size to be applied to the division. Each div must have two event handler attributes that will call the function and pass the related parameters to it. Here is what I have so far:

Code:
function divFontSize(id, percent)
{ 
 id.style.fontsize = size;
}
</script>


<div id="objectives" onmouseover="divFontSize(this, '125%')" onmouseout ="divFontSize(this, '100%')">  
<h3>OBJECTIVES</h3>
</div>

<div id="details" onmouseover="divFontSize(this, '125%')" onmouseout ="divFontSize(this, '100%')">
<h3>DETAILS</h3>
<p> We are here</p> 
</div>

<div id="submission" onmouseover="divFontSize(this, '125%')" onmouseout ="divFontSize(this, '100%')">
<h3>SUBMISSION</h3>
</div>
Any help would be appreciated.