<p id=hey>This is my fabulous text that will change.</p>

<a onMouseover=document.getElementById('hey').style.fontSize='10'> Make it Tiny!</a> ----
<a onMouseover=document.getElementById('hey').style.fontSize='24'> Make it HUGE!!!</a>


-In our HTML paragraph tag, we name our id attribute hey because we like the name.
-We create two links that use the Javascript onMouseover event handler.
---After the equals sign:
-----document - this page
-----getElementById - Javascript's built-in method that will get elements from our page.
-----In the parenthesis - we state that we will be working on the hey element of our page.
-----We then call the Javascript style object.
-----We then call the fontSize property of the style object.
-----We say make it 10 pixels for the first sentence and 24 pixels for the second.


Now, to make fonts get bigger or smaller, we'll write a function. But first, we'll make a few changes to our text in our anchor tags using onClick to call our new function.


<p id=hey>This is my fabulous text that will change.</p>

<a onClick=funTime("grow")> GROW!</a> ----
<a onClick=funTime()> Make it Smaller!</a>

<script type="text/javascript">
var dsi=16;
function funTime(p) {
if (p == "grow") {
dsi++;
}
else {
dsi--;
}
document.getElementById('hey').style.fontSize=dsi;
}
</script>


Our first two sections are pretty much the same except we call our new function with an onClick event handler.
---We pass the value of "grow" if the GROW text is clicked.

The script:
-We name a var dsi and give it value of 16.
-We name our function funTime and say whatever is passed to it from our page will be stored in a variable we name p.
-We say if p equals grow, increment (add one to) our variable dsi.
-Or else if p is not equal to grow, decrement (subtract one from) our variable dsi.

Then we use our same snippet of code from earlier, just changing the part after the equals sign to have the value of our variable dsi. dsi starts at 16 and gets bigger or smaller depending on which text a user clicks.


Here's my Javascript Change Fonts article, which has even more fun things to do with fonts.


Free Copy and Paste Javascript Code:

<script type="text/javascript">
<!--

var dsi=16;
function funTime(p) {
if (p == "grow") {
dsi++;
}
else {
dsi--;
}
document.getElementById('hey').style.fontSize=dsi;
}

-->
</script>

<table height=50><tr><td valign=top height=50>
<p id=hey>This is my fabulous text that will change.</p>
</td></tr></table>

<a onClick=funTime("grow")> GROW!</a> ----
<a onClick=funTime()> Make it Smaller!</a>

<br><br><br>

<a id=bop>Hello</a>
<a onMouseover=document.getElementById('bop').style.fontSize='10'> Make it Tiny!</a> ----
<a onMouseover=document.getElementById('bop').style.fontSize='24'> Make it HUGE!!!</a>



For fun, I just wrapped this article in a <div> tag and gave it my id name. You could do the same in the body tag. SO...

GROW this page! ---- Make it Smaller!


Resources:
Javascript Change Fonts
Javascript Change Background Colors
HTML paragraph tag
Javascript onMouseover
Javascript onClick
If, Else If, and Else in Javascript
Create a Function in Javascript
Call your Function in Javascript
Passing an Argument or Variable to a Javascript
Increment a Variable in Javascript