La façon correcte d'insérer un titre dans les graphiques sur une page Web est de remplacer l'exploitation des feuilles de style (voir amélioration progressive de l'accessibilité et l'utilisabilité: discret JavaScript ). Cette technique vous permet de faire du site un contenu plus accessible quel que soit le graphisme d'affichage fixé par feuilles de style. Aussi, les robots et les araignées, avoir une lecture correcte du code HTML, en ignorant les graphismes de remplacement offrent à l'utilisateur final. Insérer une image directement (TAG img ), en fait, de rendre le texte du titre inaccessible aux lecteurs ordinaires ASCII (chenilles, araignées, les plugins de blog, les lecteurs d'écran, etc ...).
Un autre avantage de ne pas être sous-estimé est la possibilité de charger une feuille de style par rapport à la langue, ce qui rend le site situé au niveau des images.
La technique de l'opération de remplacement en utilisant CSS ne peut être appliquée aussi à des sites Web déjà en ligne, où le code HTML, pour diverses raisons, n'est pas altérée. La condition nécessaire et suffisante pour que vous puissiez appliquer la technique de remplacement est d'avoir accès au titre uniques / texte à remplacer. Par exemple, si nous avons une condition comme ceci:
1 |
, un possibile codice CSS potrebbe essere: Merci à l'attribut id dans le TAG H1 , un éventuel code CSS sera:
1 2 3 4 5 | h1 {# titolo_uno -1000000px ; text-indent:-1000000px; block ; width : 100px ; height : 30px ; display: block; width: 100px; height: 30px; url ( images/titolo-in-grafica.gif ) no-repeat ; background: url (images / titre-en-grafica.gif) no-repeat; } |
Faute d'un sélecteur unique, comme le « id de l'affaire précédente, bien sûr, les choses se compliquent, et chaque cas doit être analysé séparément, en essayant de récupérer l'unicité dans l'arbre DOM HTML.
Mais si vous écrivez le code HTML, je vous recommande cette syntaxe, qui fournit une bonne marquage:
1 |
Et le CSS lié:
1 2 3 4 5 | display : none } h1 # titolo_uno span {display: none} h1 {# titolo_uno block ; width : 100px ; height : 30px ; display: block; width: 100px; height: 30px; url ( images/titolo-in-grafica.gif ) no-repeat ; background: url (images / titre-en-grafica.gif) no-repeat; } |
. Ceci empêche le text-indent:-1000000px , le rendant plus propre, malgré l'ajout de la span . (tooltips) sopra al titolo in grafica. Le texte lui-même disparaît en raison de la span , mais reste le title (tooltips) au-dessus du titre graphique.
Cette procédure a l'avantage de ne pas exiger le langage Javascript pour être utilisé, le rendant simple et facile à appliquer, même pour les moins expérimentés.
Utilisez le
text-indentde sorte qu'il ne semble pas tout à fait raison, mais avec la deuxième solution résout tout .. Je l'aime, est une bonne technique .. Je vais garder en considération pour le travail futur!@ Angelo: Je suis d'accord, le
text-indentest généralement un «patch» lorsque vous ne pouvez pas écrire un meilleur code HTML. La seconde, cependant, je me sers toujours quand je fais face à des titres qui «peut» être remplacé par graphique plus tard.Dans les prochains jours seront également présents une autre technique intéressante pour remplacer le texte avec des graphiques ... alors dites-moi si il est "gentil" que j'ai trouvé, je
Je le ferai!
Remplacement de texte [...] je vous présente aujourd'hui est à certains égards, très intéressant. Contrairement à l'image classique en utilisant le CSS pour remplacer l'exploitation, cette technique utilise une animation Flash d'écraser les titres de notre site. En dépit d'être une [...]