Foros del Web » Creando para Internet » HTML »

Botones con imagenes pero que no aparezcan las palabras

Estas en el tema de Botones con imagenes pero que no aparezcan las palabras en el foro de HTML en Foros del Web. Hola Gente, estoy tratando de hacer una botonera usando imagenes de fondo, no texto. Pero para la usabilidad quiero poner el texto dentro para no ...
  #1 (permalink)  
Antiguo 17/04/2008, 18:30
 
Fecha de Ingreso: noviembre-2007
Ubicación: Rosario, Santa Fe
Mensajes: 5
Antigüedad: 10 años
Puntos: 0
Botones con imagenes pero que no aparezcan las palabras

Hola Gente, estoy tratando de hacer una botonera usando imagenes de fondo, no texto. Pero para la usabilidad quiero poner el texto dentro para no poner un espacio vacio. Pero no se como hacer para no mostrar este texto. Alguien me puede ayudar??
Gracias.

Aca va el codigo.

<ul>
<li><a class="boton1" class href="#.php">Boton1</a></li>
<li><a class="boton2" href="#.php">Boton 2</a></li>
<li><a class="boton3" href="#.php">Boton 3</a></li>
</ul>
  #2 (permalink)  
Antiguo 17/04/2008, 18:45
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
Re: Botones con imagenes pero que no aparezcan las palabras

Prueba a poner esto:

<ul>
<li><a class="boton1" href="#.php"><span>Boton 1</span></a></li>
<li><a class="boton2" href="#.php"><span>Boton 2</span></a></li>
<li><a class="boton3" href="#.php"><span>Boton 3</span></a></li>
</ul>

y en la css:

span {
visibility: hidden;
}
a {text-decoration: none;}

Mikel.
  #3 (permalink)  
Antiguo 17/04/2008, 18:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Botones con imagenes pero que no aparezcan las palabras

Cita:
Iniciado por Mikmoro Ver Mensaje
Prueba a poner esto:

<ul>
<li><a class="boton1" href="#.php"><span>Boton 1</span></a></li>
<li><a class="boton2" href="#.php"><span>Boton 2</span></a></li>
<li><a class="boton3" href="#.php"><span>Boton 3</span></a></li>
</ul>

y en la css:

span {
visibility: hidden;
}
a {text-decoration: none;}

Mikel.
¡Je, je!... muy ocurrente...

Y porqué de fondo, si se puedes poner un tag img dentro de un enlace...
<a ... ><img... /></a>

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 17/04/2008, 19:03
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
Re: Botones con imagenes pero que no aparezcan las palabras

De esta manera, si desactivas la css no se ve la imagen sino el texto

Bueno, él decía que quería poner texto por usabilidad (imagino que se refería a accesibilidad, donde se recomienda no usar únicamente imágenes como vínculos).

Por cierto: cuánto tiempo sin leerte. Saludos

Mikel.
  #5 (permalink)  
Antiguo 17/04/2008, 19:22
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Botones con imagenes pero que no aparezcan las palabras

Cita:
Iniciado por Mikmoro Ver Mensaje
De esta manera, si desactivas la css no se ve la imagen sino el texto

Bueno, él decía que quería poner texto por usabilidad (imagino que se refería a accesibilidad, donde se recomienda no usar únicamente imágenes como vínculos).

Por cierto: cuánto tiempo sin leerte. Saludos

Mikel.
¡Que tal Mikel!... pues sí, llevo unos días sin línea, y lo poco que hago es ir a algún ciber para bajar el correo, y husmear un poco...

La verdad es que no termino de aclararme sobre usabilidad y accesibilidad (creo que casi, casi lo entiendo), pero lo que noto en el código es poca semántica... nunca me gustó ver enlaces (etiquetas "a") para no enlazar

Lo de las imágenes, lo importante es que tengan su atributo alt por el tema de la accesibilidad (¡o tal vez era lo otro !)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 17/04/2008, 19:24
 
Fecha de Ingreso: noviembre-2007
Ubicación: Rosario, Santa Fe
Mensajes: 5
Antigüedad: 10 años
Puntos: 0
Botones con imagenes pero que no aparezcan las palabras

Gente creo que no logro hacerme entender, para que este mas claro, quiero lograr algo como esto: http://www.revolutiondrivingtuition.co.uk, si se fijan el codigo, los botones tienen escrito lo que es cada uno, pero estan hechos con imagenes, esto es lo que quiero lograr.
Saludos y gracias por la ayuda.
  #7 (permalink)  
Antiguo 18/04/2008, 01:13
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
Re: Botones con imagenes pero que no aparezcan las palabras

Pues no, efectivamente, por mi parte es ahora cuando no te haces entender.
Primero has dicho:

"hacer una botonera usando imagenes de fondo, no texto",
"Pero no se como hacer para no mostrar este texto".


Y a eso es exactamente a lo que te he respondido y puesto el código de cómo hacerlo.

Y ahora dices:

"si se fijan el codigo, los botones tienen escrito lo que es cada uno, pero estan hechos con imagenes, esto es lo que quiero lograr."

Pero esto ya estaba claro, ya lo habías dicho, que ibas a usar imágenes de fondo, supongo que con la palabra de cada menú.

¿Es que para el ejemplo que pones no te sirve el código que te he puesto? Haz las imágenes de fondo y luego ponlas como background en las clases de cada botón, que era lo que parecía que tenías claro como hacer.

¿No querías poner texto y ocultarlo para no dejar vacíos los vínculos, según tu primera pregunta? pues eso es lo que te he puesto.

Mikel.
  #8 (permalink)  
Antiguo 18/04/2008, 01:46
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
Re: Botones con imagenes pero que no aparezcan las palabras

Cita:
Iniciado por caricatos Ver Mensaje
Lo de las imágenes, lo importante es que tengan su atributo alt por el tema de la accesibilidad (¡o tal vez era lo otro !)

Saludos
Sí, para la accesibilidad lo importante es que cada imagen contenga la etiqueta "alt", aunque se recomienda no usar en la medida de lo posible imágenes como vínculos.

la pauta 3.1 de accesibilidad dice:

"Utilice marcadores en vez de imágenes para transmitir información, si existe un lenguaje de marcado apropiado. (Prioridad 2)"

y la pauta 10.5 dice:

"Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) representen de forma diferenciada los enlaces adyacentes, incluya caracteres imprimibles no enlazados (rodeados de espacios) entre los enlaces adyacentes. (Prioridad 3)"

Mikel.
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 20:55.