estilo en vinculos que permitan regresar a estilo anterior

zeudio · #1 (**permalink**) 24/06/2008, 09:58

que tal compañeros

quisiera saber si existe la manera de que al usar css para un menu, este tenga una propiedad que me permita hacer un efecto que mantenga el estylo del link seleccionado (como seria con el a:visited, por ejemplo) pero que al presionar en otro link me devuelva al estilo anterior u otro distinto.

Espero haber sido claro

Gracias y saludos

Mikmoro · #2 (**permalink**) 24/06/2008, 10:22

No estoy seguro de entenderte, pero lo que imagino que quieres lo puedes hacer con :focus y :active.

Mikel.

zeudio · #3 (**permalink**) 24/06/2008, 10:41

si, por el estilo. Deseo que la imagen cambie al hacer clic en el vinculo, pero necestio que al hacer clic en otro vinculo, este último regrese al anterior.

Para tratar de ser mas claro, si tengo una imagen como estilo inicial "onMouseOut.jpg", y doy clic en ella cambiara el estilo a "onCLick.jpg". Finalmente, al presionar en otro link, el estilo de este ultimo devebe regrsar a la imagen "onMouseOut.jpg".

gracias

Mikmoro · #4 (**permalink**) 24/06/2008, 10:48

Sí, pues lo que te he puesto; active y focus.

Mikel.

daPhyre · #5 (**permalink**) 24/06/2008, 10:49

Código:

a:link, a:visited{
 background:url(onMouseOut.jpg) no-repeat;
}
a:active, a:focus{
 background:url(onClick.jpg) no-repeat;
}

Creo que es esto lo que intentas hacer...

zeudio · #6 (**permalink**) 24/06/2008, 11:09

gracias a ambos por su tiempo. les comento que he intentado lo siguiente sin éxito:

css:
.menu1
{
cursor:hand;
background: url(imagenes/submenuHome2_out.jpg) no-repeat;
width:49px; height:49px;
}

.menu1:hover
{
background: url(imagenes/submenuHome2_over.jpg) no-repeat;
}
.menu1:link, .menu1:visited{
background:url(submenuHome2_out.jpg) no-repeat;
}
.menu1:active, .menu1:focus{
background:url(submenuHome2_clic.jpg) no-repeat;
}

html:
<div class="menu1">
<a href="test.aspx?asas=atggsa">
<img src="../imagenes/spacer.gif" Height="49" Width="49" border="0" alt="tooltip"/>
</a> <br />test

</div>

En donde se encuentra el error?

Gracias

Mikmoro · #7 (**permalink**) 24/06/2008, 11:16

En:

.menu1 a:hover
{
background: url(imagenes/submenuHome2_over.jpg) no-repeat;
}
.menu1 a:link, .menu1 a:visited{
background:url(submenuHome2_out.jpg) no-repeat;
}
.menu1 a:active, .menu1 a:focus{
background:url(submenuHome2_clic.jpg) no-repeat;
}

Mikel.

daPhyre · #8 (**permalink**) 24/06/2008, 11:21

otro detalle, se recomienda que las etiquetas a se hagan en el siguiente orden:

-link
-visited
-hover
-active
-focus

Todo parece ser que se activan unos sobre los otros, por lo que a veces dan resultados no esperados cuando se ponen en otro orden (A mi me sucedió una vez). Suerte!

zeudio · #9 (**permalink**) 24/06/2008, 11:21

bien, ya logre hacerlo, pero el problema sigue siendo el mismo, el onClick.jpg debería permanecer hasta que se presione otro boton. de esta forma solo aparece al presionar el boton, pero regresa al onMouseOut.jpg en el momento en que se suelta

gracias de nuevo

daPhyre · #10 (**permalink**) 24/06/2008, 11:24

Es extraño, a mi no me hace esto... Una pregunta, ¿El link que presionas te lleva a la misma página o a una nueva?

Mikmoro · #11 (**permalink**) 24/06/2008, 11:28

Cita:

Iniciado por zeudio

bien, ya logre hacerlo, pero el problema sigue siendo el mismo, el onClick.jpg debería permanecer hasta que se presione otro boton. de esta forma solo aparece al presionar el boton, pero regresa al onMouseOut.jpg en el momento en que se suelta

gracias de nuevo

Creo que puede deberse a un pequeño error: en realidad el orden

-link
-visited
-hover
-active
-focus

creo que el correcto es

-link
-visited
-hover
-focus
-active

Aun así, creo que debería funcionar.

¿Dónde está el onClick.jpg en tu código?

Mikel.

zeudio · #12 (**permalink**) 24/06/2008, 11:34

lo intente apuntando a una distinta y a la misma pero no funciona. Alguno tendra algun tuto o una web que pueda tomar como rreferencia?

Mikmoro · #13 (**permalink**) 24/06/2008, 11:40

Veamos.

No sé cómo son tus imágenes, pero este código hace exactamente lo que buscas:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.menu1 a:hover {
background: url(tu_imagen1.jpg) no-repeat;
}
.menu1 a:focus, .menu1 a:active {
background: url(tu_imagen1.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="menu1">
<a href="#">
<img src="img/1.jpg" Height="49" Width="49" border="0" alt="tooltip"/>
</a> <br />test</body>
</html>

Claro, hay que tener en cuenta que las imágenes de fondo quedarán detrás de la que pones en el html.

Míralo a ver poniendo tus imágenes.

Mikel.

daPhyre · #14 (**permalink**) 24/06/2008, 11:42

Quizá sea un error de implementación en el html ¿Puedes ponernos como lo tienes?

Ahora, si se hace una nueva página, por lógica el menú se "resetea", por lo que el active no se va a ver, pero en la misma página debería funcionar sin problemas...

PD Mik: En internet no encuentro información del orden correcto, pero todas las páginas ponen active antes que focus en las explicaciones... ¿Seguro que es ese orden? Que siempre lo he usado al revez

Quizá no funcionen como deberían por eso...

zeudio · #15 (**permalink**) 24/06/2008, 11:43

mira, ahi te va de nuevo el codigo

css (es externo):
#menu1 a, #menu1 a:visited {
background:url(../../imagenes/submenuHome2_out.jpg) no-repeat;
}
#menu1 a:hover
{
background: url(../../imagenes/submenuHome2_over.jpg) no-repeat;
}
#menu1 a:active, #menu1 a:focus{
background:url(../../imagenes/submenuHome2_clic.jpg) no-repeat;
}

html:
<table id="menu1">
<tr>
<td>
<div>
<a href="test.aspx">
<img src="../imagenes/spacer.gif" Height="49" Width="49" border="0" alt="tooltip"/>
<br />test</a>

</div>
</td>

<td>
<div>
<a href="test2.aspx">
<img src="../imagenes/spacer.gif" Height="49" Width="49" border="0" alt="tooltip"/>
<br />test2 </a>

</div>
</td>
</tr>
</html>

los botones se ven pero como te comento no se queda en el jpg onClick, este solo medio aparece cuando se presaiona en el boton y regresa al jpg onMouseOut.

Mikmoro · #16 (**permalink**) 24/06/2008, 11:46

Mira por ejemplo aquí

Busca focus dentro de es página.

Tampoco estoy seguro al 100%, pero recuerdo que alguna vez me falló en ese orden y se corrigió al cambiarlo. O quizá fue otra cosa.

Mikel.

Mikmoro · #17 (**permalink**) 24/06/2008, 11:48

¿Pero con este vínculo (<a href="test2.aspx">) no cambias de página?

En ese caso ¿cómo se va a quedar activo? deberías haber empezado por ahí, diciendo que al irte a otra página te gustaría que...

Mikel.

zeudio · #18 (**permalink**) 24/06/2008, 11:52

Cita:

Iniciado por Mikmoro

Veamos.

No sé cómo son tus imágenes, pero este código hace exactamente lo que buscas:

Claro, hay que tener en cuenta que las imágenes de fondo quedarán detrás de la que pones en el html.

Míralo a ver poniendo tus imágenes.

Mikel.

Gracias Mikmoro, tienes razón, al parecer este es el orden correcto ya que fue el que funciono correctamente. Problema solucionado.

y aclarando para futuras consultas, el efecto se realizo en links que llaman a la misma página.

Gracias a ambos de nuevo

zeudio · #19 (**permalink**) 24/06/2008, 11:58

Cita:

Iniciado por Mikmoro

¿Pero con este vínculo (<a href="test2.aspx">) no cambias de página?

En ese caso ¿cómo se va a quedar activo? deberías haber empezado por ahí, diciendo que al irte a otra página te gustaría que...

Mikel.

por ciero, me nace una inquietud, aya que mencionas esto, es posible hacerlo entre distintas paginas?

Mikmoro · #20 (**permalink**) 24/06/2008, 12:18

Si cargas una nueva página no, lógicamente. Para hacerlo deberías usar PHP o un lenguaje del lado servidor para que cada página cargue el mismo menú de un archivo externo, entonces sí se podría hacer.

Me dejas con una tremenda duda:

¿como es posible que test.aspx y test2.aspx sean un mismo archivo?

Mikel.

daPhyre · #21 (**permalink**) 24/06/2008, 12:23

Cita:

Iniciado por Mikmoro

Mira por ejemplo aquí

Busca focus dentro de es página.

Tampoco estoy seguro al 100%, pero recuerdo que alguna vez me falló en ese orden y se corrigió al cambiarlo. O quizá fue otra cosa.

Mikel.

Estaba muy escondido

... Pero lo encontré, y mucha otra información interesante de paso. Gracias por el link, corregiré los CSS a ver si funcionan correcto ahora

zeudio · #22 (**permalink**) 24/06/2008, 12:27

Pues eso fue lo que pense, ya lo he trabajado haciendolo con un lenguaje pero por ahi me comentaronm que se podria con css... en fin, queda desmentida y descartada esta opcion si se trabaja con distintos archivos.

Cita:

Iniciado por Mikmoro

Si cargas una nueva página no, lógicamente. Para hacerlo deberías usar PHP o un lenguaje del lado servidor para que cada página cargue el mismo menú de un archivo externo, entonces sí se podría hacer.

Me dejas con una tremenda duda:

¿como es posible que test.aspx y test2.aspx sean un mismo archivo?

Mikel.

No para nada, no lo son, solo que publique esta parte del codigo en el momento en que hacia pruebas. El ejemplo funciono apuntando a alguna parte del mismo documento (a href="#a"), es mas, no funciona sigquiera apuntando al mismo archivo (a href="test.asp").

Gracias por la ayuda

daPhyre · #23 (**permalink**) 24/06/2008, 12:29

Cita:

Iniciado por zeudio

por ciero, me nace una inquietud, aya que mencionas esto, es posible hacerlo entre distintas paginas?

Para esto yo utilizo AJAX... Quizá no sea la solución más adecuada, pero a mi me ha funcionado muy bien hasta ahora...

http://www.forosdelweb.com/f4/mostra...1/#post2374460

daPhyre · #24 (**permalink**) 24/06/2008, 15:56

Otro detalle que he notado, es que usas imagenes de 49x49 pixeles para tus botones; esto de seguro hace que tarden un poco para verse y en cargarse, lo que no lo hace muy atractivo. Por casualidad, recientemente con la ayuda de Mikel, pude desarrollar un menú similar, que usa una sola imagen conteniendo todas las imagenes a mostrar, optimizando velocidad y carga. Puedes verlo aquí:

http://mx.geocities.com/daphyreweb/w...enu-num-i.html

Si te interesa implementarlo y tienes dudas, no dudes en preguntar. Suerte!

kseso? · #25 (**permalink**) 24/06/2008, 16:09

Hola daPhyre:
Revisa tu enlace, Yahoo!Geocities lo ha guardado tan bien que ahora no lo encuentra.

Mikmoro · #26 (**permalink**) 24/06/2008, 16:09

Cita:

Iniciado por zeudio

Pues eso fue lo que pense, ya lo he trabajado haciendolo con un lenguaje pero por ahi me comentaronm que se podria con css... en fin, queda desmentida y descartada esta opcion si se trabaja con distintos archivos.

Como veo que ya sabes, el asunto es que al cargar otra página el menú será nuevo, en cuyo caso es casi imposible hacerlo con css, pero tienes dos opciones: hacerlo javascript, de manera que al pulsar además de ir a la nueva página mande una variable para que cambie la opción del menú, o con un include, para que el menú sea siempre el mismo y puedas manipularlo.
Quizá haya una tercera con ajax, como dice daPhyre.

Cita:

Iniciado por zeudio

No para nada, no lo son, solo que publique esta parte del codigo en el momento en que hacia pruebas. El ejemplo funciono apuntando a alguna parte del mismo documento (a href="#a"), es mas, no funciona sigquiera apuntando al mismo archivo (a href="test.asp").

Ya me parecía a mi extraño, y te lo comenté porque si hacías las pruebas con esos enlaces era imposible que funcionara

Has sido un placer

Mikel.

kseso? · #27 (**permalink**) 24/06/2008, 16:17

Voy a ser tan atrevido como para complementar a Mikmoro (no me reconozco

):
Hay una tercera forma: el uso de cuadros o frames (aunque ya se que todo, casi, el mundo los desaconsejan), pero es otra forma.
Saludos

daPhyre · #28 (**permalink**) 24/06/2008, 16:24

Cita:

Iniciado por kseso?

Hola daPhyre:
Revisa tu enlace, Yahoo!Geocities lo ha guardado tan bien que ahora no lo encuentra.

Peor... Error del que lo puso! Me faltó una "L" al final

Ya lo corregí, !Gracias por notarlo!

Cita:

Iniciado por Mikmoro

...o con un include, para que el menú sea siempre el mismo y puedas manipularlo...

¿A traves de un include el menú queda tal cual, y me respeta el último focus/active? Eso no lo sabía... ¿Exactamente donde pongo este "include", que me ha llamado la atención mucho este método y no se como implementarlo?

daPhyre · #29 (**permalink**) 24/06/2008, 16:30

Cita:

Iniciado por kseso?

Voy a ser tan atrevido como para complementar a Mikmoro (no me reconozco

):
Hay una tercera forma: el uso de cuadros o frames (aunque ya se que todo, casi, el mundo los desaconsejan), pero es otra forma.
Saludos

En dado caso, sería una cuarta forma y para tal caso, creo que es mejor usar AJAX como propuse yo... Bueno, ambos tienen sus desventajas, pero creo que este es menos desaprobado

Mikmoro · #30 (**permalink**) 24/06/2008, 16:32

Lo siento, pero no controlo demasiado php como para ayudarte. Sé que se estuvo debatiendo en este foro no hace mucho tiempo, pero no recuerdo el hilo ni cómo encontrarlo. No se trataba del active, sino de un truquillo con el id del body, pero no sé decirte. Yo creo que mirando en las FAQ de PHP habrá cosas por el estilo.

Yo en ese sentido tiendo a simplificar: si voy a cargar una nueva página, cambio la clase a la opción activa y listo.

Mikel.

P.D.: ahora que pienso, el truco no es tan difícl de hacer con css.