Menu CSS, boton "activo" al cargar la pagina

[JessicaTJ]

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 CSS:

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.

[sweetlydark]

Que quieres decir con activo?

Si hablas sobre el Pseudo-class active de los enlace solo se muestra en ese momento cuando el usuario toca el enlace (aunque en tu caso tienes el mismo estilo para cuando el enlace es visitado tambien).

[JessicaTJ]

Hola sweetlydark, gracias por responder, veraz, tengo esta imagen:



La imagen representa esto:

Estado Inactivo
Estado Hover
Estado Activo

El estado activo se keda "activado" cuando dan click en ese boton, pero, mi pregunta es, como puedo hacer para que ese boton aparezca ya "activado" cuando se carga la pagina, pero, cuando den click en otro boton, este se desactive de forma "normal"

Espero darme a explicar, mil gracias !!!!

[sweetlydark]

Deja ver lo que quieres es crear un menu, como se ven mucho, donde el tab de la pagina actual es de un color distinto a los demas y pues al pasar el cursor se ve el imagen de hover?

Si es asi estos menu se hace asignando clases a cada tab del menu donde en cada pagina cambias el clase de la pagina activada.

Home.html

<a class="activado">Home</a>
<a class="desactivado">Pagina 4</a>
<a class="desactivado">Pagina 3</a>

pagina2.html

<a class="desactivado">Home</a>
<a class="activado">Pagina 2</a>
<a class="desactivado">Pagina 3</a>

Algo parecido a esto. Eso combinado con los css que ya tienes debería hacer el efecto.

[JessicaTJ]

Hola sweetlydark.

Mil gracias, ya logre hacerlo, solo agregue una ID "current" al boton y con jquery remuevo la ID cuando se necesite, de todas maneras mil gracias de nuevo por tu ayuda sweetlydark !!!

Besos.

[pixelado]

Hola Jessica yo andaba buscando como hacer eso que dices,
podrias poner el ejemplo del que te funciona?

:)