Botones con imagenes pero que no aparezcan las palabras

[guillo65]

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>

[Mikmoro]

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.

[caricatos]

Iniciado por Mikmoro

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

[Mikmoro]

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.

[caricatos]

Iniciado por Mikmoro

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

[guillo65]

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.

[Mikmoro]

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.

[Mikmoro]

Iniciado por caricatos

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.