The correct way to insert titles into graphics on a Web page is by replacement with style sheets (see Progressive Enhancement in Accessibility and Usability: unobtrusive JavaScript ). This technique allows you to make content more accessible site regardless of the display graphics set by style sheets. Also, crawlers and spiders, have a correct reading of HTML, ignoring the replacement graphics offer the end user. Insert a picture directly (TAG img ), in fact, make the title text inaccessible to ordinary readers ASCII (crawlers, spiders, blog plugin, screen readers, etc ...).
Another advantage not to be underestimated is the possibility to load a style sheet in relation to the language, making in this way the site localized also at the level of images.
The technique can be applied using CSS replacement is also limited to Web sites already online, where the HTML, for various reasons, is not altered. The necessary and sufficient condition so that we can apply the technique of substitution is to be able to access in an unequivocal way to title / text to be replaced. For example, if we have a condition of this type:
1 |
, un possibile codice CSS potrebbe essere: Thanks to the attribute id in the TAG H1 , a possible CSS code could be:
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 / title-in-grafica.gif) no-repeat; } |
Lacking a unique selector, as the ' id of the previous case, of course things get complicated, and each case must be analyzed separately, trying to recover uniqueness in the HTML DOM tree.
But if you are writing code in HTML, I recommend this syntax, which guarantees a good tagging:
1 |
And relevant CSS:
1 2 3 4 5 | display : none } # titolo_uno h1 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 / title-in-grafica.gif) no-repeat; } |
. In this way you avoid the text-indent:-1000000px , making everything more clean, despite the addition of the span . (tooltips) sopra al titolo in grafica. The text itself disappears due to the span but remains the title (tooltips) above the title graphic.
This procedure has the advantage of not requiring Javascript to be used, making it simple and easy to apply even for the less experienced.
Use the
text-indentcorrettissimo so I do not think, however, with the second solution is the answer to everything .. I like it, is a good technique .. I will keep in consideration for future work!@ Angelo: I agree, the
text-indentis usually a "patch" when you can not write a better HTML code. The second, however, I always use when I'm dealing with titles that "may" be replaced with graphical later.In the coming days will also present another very interesting technique to replace text with graphics ... then tell me if it is "nice" as I found I
I will!
[...] Text Replacement I am presenting today is in some respects, very interesting. Unlike the classic image replacement is for using CSS, this technique uses a Flash movie to overwrite the titles of our site. Despite being a [...]