Botones-imágenes no se queden señalados al hacer click ...

AngelJ · #1 (**permalink**) 08/03/2009, 16:57

Este post viene rebotado del foro General...

forosdelweb.com/f91/botones-imagenes-no-queden-senalados-hacer-click-677520/

Me gustaría saber que se puede hacer para evitar el efecto "rectángulo discontinuo" que se puede apreciar en muchísimas webs una vez se ha pulsado un botón del menú cuando este no es otra cosa más que una imagen.

En principio supongo que será algo del tipo predefinir el botón en css con la imagen declarada como fondo, pero me gustaría que me pudieran orientar con más precisión.

Gracias.

Mikmoro · #2 (**permalink**) 08/03/2009, 17:17

Añade al enlace:

outline: 0;

jomaruro · #3 (**permalink**) 08/03/2009, 17:22

Hola:

Para cambiar eso debes configurar las propiedades de las class o id que apliques a los enlaces o aplicar las pseudo-clases.

Léete este capítulo del manual "Introducción a CSS" de esta página.

Saludos.

Mikmoro · #4 (**permalink**) 08/03/2009, 17:54

Cita:

Iniciado por AngelJ

para evitar el efecto "rectángulo discontinuo"

Yo juraría que se refiere al outline.

marcosnc_08 · #5 (**permalink**) 08/03/2009, 19:01

Segun lo que yo entendi se refiere a las pseudo-clases, es especial a:

Código:

a:visited

AngelJ · #6 (**permalink**) 09/03/2009, 02:09

Gracias a ambos por vuestra ayuda... aunque creo que no me he explicado lo suficiente, os pongo una web de ejemplo:

degendegen.com/

Cuando pulsamos a uno de los botones de arriba, que no son otra cosa más que imágenes (degendegen.com/images/deg-fotos-over.jpg), una vez pulsado el botón queda marcado con un rectángulo negro en línea discontínua hasta que la nueva página es cargada. Esto es básicamente lo que quiero evitar, ya que me parece antiestético.

Saludos.

PD: Siento no poder dejaros los enlaces de forma directa, pero el foro no me deja ya que ni he llegado al mensaje 30, ni tengo 30 días de antigüedad.

Mikmoro · #7 (**permalink**) 09/03/2009, 03:57

Sí, es exactamente lo que te he dicho, y se llama outline.

marcosnc_08 · #8 (**permalink**) 09/03/2009, 05:14

Trata de usar la Pseudo clase "a:focus", que es la que indica cuando el usuario esta interactuando con un elemento.

Fijate que eso no aparece en internet explorer. Si no me equivoco el Explorer no soporta "a:focus"

Mikmoro · #9 (**permalink**) 09/03/2009, 05:20

Cita:

Iniciado por AngelJ

una vez pulsado el botón queda marcado con un rectángulo negro en línea discontínua hasta que la nueva página es cargada.

marcosnc_08: ¿no conoces la propiedad outline? pues es eso, no busques otra cosa. Los elementos no tienen un rectángulo dashed (guinado) por defecto ni con :visited ni con :focus. Es sencillamente la propiedad outline, que se puede eleminar con outline: none o outline: 0.

Go_To_10 · #10 (**permalink**) 09/03/2009, 05:30

Según mi opinión hay que tener cuidado al anular el outline, si añades outline: 0; de forma genérica a toda la página te estarás cargando la navegación a través del teclado. Ese recuadro es el que nos indica donde está el foco, así que sería muy complicado usar el tabulador para navegar por esa web.

Mikmoro · #11 (**permalink**) 09/03/2009, 05:30

Ejemplo

Perdón, he dicho dashed (guionado) cuando quería decir dotted (punteado).

Hablamos de navegadores normales, claro.

Mikmoro · #12 (**permalink**) 09/03/2009, 05:32

Cita:

Iniciado por Go_To_10

Según mi opinión hay que tener cuidado al anular el outline, si añades outline: 0; de forma genérica a toda la página te estarás cargando la navegación a través del teclado. Ese recuadro es el que nos indica donde está el foco, así que sería muy complicado usar el tabulador para navegar por esa web.

Realmente no te estás cargando la navegación a través del teclado, sino que necesitas incorporar variaciones visibles (las que seguramente usarás con :hover), mediante :active (IE) o :focus (resto).
Son mucho más claras que el outline, que por otro lado no todos los navegadores interpretan.

Go_To_10 · #13 (**permalink**) 09/03/2009, 05:46

Sí por supuesto, me refería a cargarse la navegación sólo visualmente, el tabulador seguirá funcionando.
Y si se incorporan otras alternativas como las que citas no habría problema.

marcosnc_08 · #14 (**permalink**) 09/03/2009, 05:47

Retiro lo dicho, Mikmoro tiene razon.

AngelJ · #15 (**permalink**) 09/03/2009, 10:30

En efecto Mikmoro, es eso, es la solución perfecta y mejor explicado imposible. Muchas gracias.

He estado haciendo pruebas con el Explorer en el ejemplo que subiste y no quedaba el outline en ninguna de las 2 posiciones, yo no sabía que esa propiedad no era visible en ese navegador.

jomaruro · #16 (**permalink**) 09/03/2009, 15:53

Cita:

Iniciado por marcosnc_08

Retiro lo dicho, Mikmoro tiene razon.

Hola:

Mikmoro siempre tiene razón y además no es de boquilla, lo demuestra.

Saludos.

Mikmoro · #17 (**permalink**) 09/03/2009, 16:11

No, faltaría más: lo que sí es cierto es que me gusta investigar y comprobar las cosas antes de comentar algo, pero como todo bicho viviente, de cuando en cuando meto la pata

Así que de infalible ná de ná, vamos ni yo ni nadie en este mundo.

Saludos.

jomaruro · #18 (**permalink**) 09/03/2009, 16:44

Cita:

Iniciado por Mikmoro

Así que de infalible ná de ná, vamos ni yo ni nadie en este mundo.

Totalmente de acuerdo, pero todavía no te he visto equivocarte salvo que no interpretaras bien la pregunta, detalle que muchas veces es fácil que nos pase tal y como escribe la gente.

Saludos.