La forma correcta de insertar títulos en gráficos en una página Web es de una sustitución con las hojas de estilo (véase la mejora progresiva en Accesibilidad y Usabilidad: discreta JavaScript ). Esta técnica le permite hacer más accesible el contenido del sitio, independientemente de los gráficos de pantalla establecidas por las hojas de estilo. Además, los robots, arañas, tienen una lectura correcta de HTML, haciendo caso omiso de los gráficos de reemplazo ofrecen al usuario final. Insertar una imagen directa (DAT img ), de hecho, hacer que el texto del título inaccesible para los lectores ordinarios ASCII (rastreadores, arañas, plugin blog, los lectores de pantalla, etc ...).
Otra ventaja que no debe subestimarse es la posibilidad de cargar una hoja de estilo en relación con la lengua, haciendo de esta manera el sitio localizada también en el nivel de las imágenes.
La técnica se puede aplicar con el reemplazo de CSS también se limita a los sitios Web ya están en línea, donde el código HTML, por diversas razones, no se altera. La condición necesaria y suficiente para poder aplicar la técnica de la sustitución es para poder acceder de forma inequívoca al título / texto para ser reemplazado. Por ejemplo, si tenemos una condición de este tipo:
1 |
, un possibile codice CSS potrebbe essere: Gracias a el atributo id en el TAG H1 , un posible código CSS puede ser:
1 2 3 4 5 | h1 {# titolo_uno -1000000px ; text-indent:-1000000px; block ; width : 100px ; height : 30px ; display: block; ancho: 100px; altura: 30px; url ( images/titolo-in-grafica.gif ) no-repeat ; background: url (imágenes / título en grafica.gif) no-repeat; } |
A falta de un selector único, como la " id del caso anterior, por supuesto, las cosas se complican, y cada caso debe ser analizado por separado, tratando de recuperar la singularidad en el árbol DOM HTML.
Pero si usted está escribiendo el código en HTML, te recomiendo esta sintaxis, lo que garantiza una buena etiquetado:
1 |
Y CSS correspondiente:
1 2 3 4 5 | display : none } # Titolo_uno h1 período {display: none} h1 {# titolo_uno block ; width : 100px ; height : 30px ; display: block; ancho: 100px; altura: 30px; url ( images/titolo-in-grafica.gif ) no-repeat ; background: url (imágenes / título en grafica.gif) no-repeat; } |
. De esta manera se evita el text-indent:-1000000px , lo que hace que todo sea más limpio, a pesar de la adición del span . (tooltips) sopra al titolo in grafica. El texto en sí desaparece debido a la span , pero sigue siendo el title (información sobre herramientas) por encima del gráfico del título.
Este procedimiento tiene la ventaja de no requerir que Javascript esté utilizado, lo que lo convierte simple y fácil de aplicar incluso para los menos experimentados.
Utilice el
text-indentcorrettissimo así que no creo, sin embargo, con la segunda solución es la respuesta a todo .. Me gusta, es una buena técnica .. voy a tener en cuenta para futuros trabajos!@ Angelo: Estoy de acuerdo, el
text-indentsuele ser un "parche" cuando no se puede escribir un código HTML más. El segundo, sin embargo, yo siempre uso cuando estoy tratando con los títulos que "puede" ser reemplazados por gráfica más tarde.En los próximos días también presentará otra técnica muy interesante para reemplazar el texto con gráficos ... y luego me dices si es "buena", como me di cuenta de
¡Lo haré!
[...] Sustitución de texto que les presento hoy es en algunos aspectos, muy interesante. A diferencia de la sustitución de la imagen clásica es para el uso de CSS, esta técnica utiliza una película de Flash para sobrescribir los títulos de nuestro sitio. A pesar de ser una [...]