Menu CSS, boton "activo" al cargar la pagina

Hola chicos, vengo con un problemita que no logro sacar, veran, tengo un menu, con botones de 3 estados, "normal", "hover" y "activo", el cual su HTML es algo asi:

Código HTML :

<a href="#" class="hp" onclick="toggleActive(this)"></a>
<a href="#" class="epson" onclick="toggleActive(this)"></a>

Su CSS es algo asi:

Código HTML :

a.hp:link, a.hp:visited, a.hp:active { display: block; background-image: url(../images/hp_button.jpg); width: 100px; height: 35px; float: left; }
a.hp:hover { background-position: 0px -35px; }
a.epson:link, a.epson:visited, a.epson:active { display: block; background-image: url(../images/epson_button.jpg); width: 100px; height: 35px; float: left;  }
a.epson:hover { background-position: 0px -35px; }
a.active:link, a.active:visited, a.active:hover {
   background-position: 0px -70px;
}

Y, el JS para cambiarlos al seccionarlo es asi:

Código Javascript :

<script type="application/javascript">
var currLink = null;
function toggleActive(state)
{
if(currLink)
currLink.className = currLink.className.replace(" active","")
currLink = state
currLink.className += " active"
}
</script>

Ahora, la pregunta del millon, como podria hacer, para que, por ejemplo, al cargar la pagina, me muestre el boton con class="hp" como "activo?

De verdad agradecere mil su ayuda chicos, he visto y visto y no doy una, casi me acerco a lo ke kiero pero no doy con el resultado deseado.

preimro establece en tu CSS un clase que se llame active[css].active {
display: block;
background-image: url(../images/hp_button.jpg);
width: 100px;
height: 35px;
float: left;
} [/css]
Atenti a que no tiene modificadores tipo :hover u otros analogos.
Ahora te recomiendo que uses jQuery lo cual te facilitara la vidsa lo que no tienes idea, ua vez que le pongas jQuery a tu pagina le pones a tu JS

Código Javascript :

$(document).ready(function(){
  $('.hp').addClass('active');
});

Y listo fin del problema.

COPY, PASTE, PLAY AND ENJOY

Mil gracias NeoCesar !!!!

Funciona perfecto