function/mouseover event help

Hi im working on a project and im having problems creating a function to increase the font size of three different divisions 25% using "onmouseover" and return to normal using "onmouseout". The three division ids are "objectives","details", and "submission". I've been playing with it for a while and i dont have much but here is the start. Thank you for viewing and any information in the right direction would be greatly appreciated.


<br/>
function divFontSize()

{

document.getElementById("objectives").style.fontsize="125%";


}


<div id="objectives" onmouseover="divFontSize ()" onmouseout="" > </div>




<br/>

In this case your function will be more dynamic if you send the element you want to change as an argument to the function instead of using getElementById(). This way you can use the same functions for all your div elements.

Code:

---

<script type="text/javascript"> // All JavaScript must be encased in <script> tags.


function showLargeFontSize(element) // One function for increasing the size.
{
        element.style.fontSize = "125%"; // 'element' is the div you're hovering over. Note the uppercase S in fontSize.
}


function showSmallFontSize(element) // And one function for resetting the size.
{
        element.style.fontSize = "100%";
}


</script>


<div id="objectives" onmouseover="showLargeFontSize(this)" onmouseout="showSmallFontSize(this)">"this" refers to this div element.</div>
<div onmouseover="showLargeFontSize(this)" onmouseout="showSmallFontSize(this)">Another div.</div>

---

(Remember that uppercase and lowercase matters in JavaScript.)


You could also combine those functions if you add the font size as an argument.

Code:

---

<script type="text/javascript">


function setFontSize(element, size)
{
        element.style.fontSize = size;
}


</script>


<div id="objectives" onmouseover="setFontSize(this, '125%')" onmouseout="setFontSize(this, '100%')">Hello.</div>

---

Thanks for the help, many thanks.