I'm using this little button maker thingy. The buttons look nice but the color of the text is supposed to change on rollover. It worked when I had only ONE button. However, when I added another it stopped working.

Two other questions:

Does the JS code have to be in the head section of the page?

How do I add a link to these buttons?

Thank you.

CSS:

<style type="text/css">

input.groovybutton
{
font-size:16px;
font-family:Verdana,sans-serif;
color:#444444;
background-color:#FFFFFF;
border-style:solid;
border-color:#444444;
border-width:1px;
width:100px;
height:30px;
}

</style>

JS:

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#33CC00";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#444444";
}

</script>

FORM:

<form name="groovyform">
<input
type="button"
name="groovybtn1"
class="groovybutton"
value="Our Bikes"
title=""
onMouseOver="goLite(groovyform,groovybtn1)"
onMouseOut="goDim(groovyform,groovybtn1)">
</form>
</div>
<div id="buttontwo"><form name="groovyform">
<input
type="button"
name="groovybtn2"
class="groovybutton"
value="Inclusions"
title=""
onMouseOver="goLite(groovyform,groovybtn2)"
onMouseOut="goDim(groovyform,groovybtn2)">
</form>

I understand the problem now. I changed some stuff and put the buttons in two different forms.