Foros del Web » Creando para Internet » CSS »

Menu CSS, boton "activo" al cargar la pagina

Estas en el tema de Menu CSS, boton "activo" al cargar la pagina en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/04/2010, 12:01
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 472
Antigüedad: 17 años, 10 meses
Puntos: 25
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:
Ver original
  1. <a href="#" class="hp" onclick="toggleActive(this)"></a>
  2. <a href="#" class="epson" onclick="toggleActive(this)"></a>

Su CSS es algo asi:
Código CSS:
Ver original
  1. a.hp:link, a.hp:visited, a.hp:active { display: block; background-image: url(../images/hp_button.jpg); width: 100px; height: 35px; float: left; }
  2. a.hp:hover { background-position: 0px -35px; }
  3. a.epson:link, a.epson:visited, a.epson:active { display: block; background-image: url(../images/epson_button.jpg); width: 100px; height: 35px; float: left;  }
  4. a.epson:hover { background-position: 0px -35px; }
  5. a.active:link, a.active:visited, a.active:hover {
  6.     background-position: 0px -70px;
  7. }

Y, el JS para cambiarlos al seccionarlo es asi:
Código Javascript:
Ver original
  1. <script type="application/javascript">
  2. var currLink = null;
  3. function toggleActive(state)
  4. {
  5. if(currLink)
  6. currLink.className = currLink.className.replace(" active","")
  7. currLink = state
  8. currLink.className += " active"
  9. }
  10. </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.
__________________
٩(͡๏̯͡๏)۶ || ٩(͡๏̯͡๏)۶
  #2 (permalink)  
Antiguo 08/04/2010, 15:34
Avatar de sweetlydark  
Fecha de Ingreso: septiembre-2008
Mensajes: 391
Antigüedad: 16 años, 1 mes
Puntos: 10
Respuesta: Menu CSS, boton "activo" al cargar la pagina

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).
__________________
Por fin vuelvo a tener internet!
http://www.anidandoetiquetas.com/
  #3 (permalink)  
Antiguo 09/04/2010, 09:00
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 472
Antigüedad: 17 años, 10 meses
Puntos: 25
Respuesta: Menu CSS, boton "activo" al cargar la pagina

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 !!!!
__________________
٩(͡๏̯͡๏)۶ || ٩(͡๏̯͡๏)۶
  #4 (permalink)  
Antiguo 09/04/2010, 16:48
Avatar de sweetlydark  
Fecha de Ingreso: septiembre-2008
Mensajes: 391
Antigüedad: 16 años, 1 mes
Puntos: 10
Respuesta: Menu CSS, boton "activo" al cargar la pagina

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.
__________________
Por fin vuelvo a tener internet!
http://www.anidandoetiquetas.com/
  #5 (permalink)  
Antiguo 12/04/2010, 13:03
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 472
Antigüedad: 17 años, 10 meses
Puntos: 25
Respuesta: Menu CSS, boton "activo" al cargar la pagina

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.
__________________
٩(͡๏̯͡๏)۶ || ٩(͡๏̯͡๏)۶
  #6 (permalink)  
Antiguo 22/03/2011, 04:27
 
Fecha de Ingreso: marzo-2011
Mensajes: 6
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Menu CSS, boton "activo" al cargar la pagina

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

:)

Etiquetas: botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:29.