Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Botones-imágenes no se queden señalados al hacer click ... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/03/2009, 17:57
 
Fecha de Ingreso: febrero-2009
Mensajes: 35
Antigüedad: 8 años, 9 meses
Puntos: 0
Botones-imágenes no se queden señalados al hacer click ...

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.
  #2 (permalink)  
Antiguo 08/03/2009, 18:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Añade al enlace:

outline: 0;
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 08/03/2009, 18:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

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.

  #4 (permalink)  
Antiguo 08/03/2009, 18:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Cita:
Iniciado por AngelJ Ver Mensaje
para evitar el efecto "rectángulo discontinuo"
Yo juraría que se refiere al outline.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 08/03/2009, 20:01
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Botones-imágenes no se queden señalados al hacer click ...

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

Código:
a:visited
  #6 (permalink)  
Antiguo 09/03/2009, 03:09
 
Fecha de Ingreso: febrero-2009
Mensajes: 35
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

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.
  #7 (permalink)  
Antiguo 09/03/2009, 04:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Sí, es exactamente lo que te he dicho, y se llama outline.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 09/03/2009, 06:14
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Botones-imágenes no se queden señalados al hacer click ...

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"
__________________
Marcos.
  #9 (permalink)  
Antiguo 09/03/2009, 06:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Cita:
Iniciado por AngelJ Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 09/03/2009, 06:30
Avatar de Go_To_10  
Fecha de Ingreso: febrero-2008
Mensajes: 5
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

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.
  #11 (permalink)  
Antiguo 09/03/2009, 06:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Ejemplo

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

Hablamos de navegadores normales, claro.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 09/03/2009, 06:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Cita:
Iniciado por Go_To_10 Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 09/03/2009, 06:46
Avatar de Go_To_10  
Fecha de Ingreso: febrero-2008
Mensajes: 5
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

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.
  #14 (permalink)  
Antiguo 09/03/2009, 06:47
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Retiro lo dicho, Mikmoro tiene razon.
__________________
Marcos.
  #15 (permalink)  
Antiguo 09/03/2009, 11:30
 
Fecha de Ingreso: febrero-2009
Mensajes: 35
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

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.
  #16 (permalink)  
Antiguo 09/03/2009, 16:53
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Cita:
Iniciado por marcosnc_08 Ver Mensaje
Retiro lo dicho, Mikmoro tiene razon.
Hola:

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

Saludos.

  #17 (permalink)  
Antiguo 09/03/2009, 17:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

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.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 09/03/2009, 17:44
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Botones-imágenes no se queden señalados al hacer click ...

Cita:
Iniciado por Mikmoro Ver Mensaje
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.

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 07:50.