| |
|
| El problema |
| Para hacer nuestras páginas más atractivas es habitual colocar imágenes conteniendo texto para enlaces o para botones, banners, etc. Esto suele recargar las páginas, supongamos que queremos usar cinco imágenes que sólo se diferencian en el texto, por ejemplo para una barra de navegación. ¿Es indispensable cargar las cino imágenes? |
| La solución |
| La respuesta a la pregunta de este problema es bien simple:
No, realmente podemos valernos de una sóla imagen. El método
para lograr este importante ahorro de peso en nuestra página es muy
simple: usar imágenes de fondo y estilos css.
En el bloque HTML (una celda o un párrafo o un elemento div)
podemos colocar una imagen de fondo y el texto del bloque aparecerá
sobre la imagen. En la página se verán botones gráficos
con texto. ¿Y para qué el estilo css?
para evitar que esa imagen de fondo aparezca repetida formando un mosaico
se usan el atributo background-repeat y si además
queremos situarla en el centro o a los lados usamos background-position. |
| Un caso práctico |
|
Este ejmplo usa una celda de una tabla con una imagen que aparecerá centrada y sobre ella aparece el texto escrito, en este caso un enlace a una página. <td width="10%" height="44" background="boton.gif"
style="background-attachment: fixed; Repitiendo esto en varias celdas de una columna (o de una fila) de la tabla tendremos una barra de navegación con botones pero usando sólo una imagen, que puede ser un típico botón en relieve o cualquier cosa que te parezca. |