Der korrekte Weg, um einen Titel in Grafiken auf einer Webseite einzufügen ist auf den Betrieb mit Stylesheets zu ersetzen (siehe Progressive Enhancement in Accessibility und Usability: unaufdringlich JavaScript ). Diese Technik ermöglicht es Ihnen, Inhalte leichter zugänglich Site unabhängig von der Display-Grafiken durch Stylesheets festgelegt machen. Außerdem haben Raupen und Spinnen, eine korrekte Lesen von HTML, ohne auf die Ersatz-Grafiken bieten dem Endbenutzer. Fügen Sie ein Bild direkt (TAG img ), in der Tat machen den Titeltext unzugänglich gewöhnliche Leser ASCII (Raupen, Spinnen, Blog-Plugins, Screenreader, etc ...).
Ein weiterer nicht zu unterschätzender Vorteil ist die Fähigkeit, ein Stylesheet in Bezug auf die Sprache zu laden, wodurch der Standort auf der Ebene der Bilder befindet.
Die Technik der Verwendung von CSS ersetzen Operation kann nur auch auf Websites bereits online, wo die HTML, die aus verschiedenen Gründen nicht verändert wird angewendet werden. Die notwendige und hinreichende Bedingung, so dass Sie den Ersatz-Technik anzuwenden ist, den Zugang zu den einzigartigen Titel / Text zu ersetzen haben. Zum Beispiel, wenn wir einen Zustand wie folgt aus:
1 |
, un possibile codice CSS potrebbe essere: Dank dem Attribut id in der TAG H1 , wäre eine mögliche CSS-Code sein:
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; } |
Ohne eine einzigartige Auswahl, wie die " id des vorherigen Fall, natürlich, werden die Dinge kompliziert, und jeder Fall muss einzeln analysiert werden, versuchen, um die Eindeutigkeit in der HTML-DOM-Baum zu erholen.
Aber wenn Sie schreiben den HTML-Code, empfehle ich diese Syntax, die eine gute Kennzeichnung lautet:
1 |
Und die dazugehörige CSS:
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 / title-in-grafica.gif) no-repeat; } |
. Dies verhindert die text-indent:-1000000px , so dass es sauber, trotz der Zugabe des span . (tooltips) sopra al titolo in grafica. Der Text selbst verschwindet aufgrund der span , bleibt aber der title (Tooltipps) über den Titel-Grafik.
Dieses Vorgehen hat den Vorteil, dass keine Javascript verwendet werden, so dass es einfach und leicht zu gelten auch für den weniger erfahrenen.
Verwenden Sie die
text-indentso scheint es nicht ganz richtig, aber mit der zweiten Lösung alles löst .. Ich mag es, ist eine gute Technik .. Ich werde in Betracht für die künftige Arbeit zu halten!@ Angelo: Ich bin damit einverstanden, die
text-indentist in der Regel ein "Patch", wenn Sie nicht schreiben können eine bessere HTML. Die zweite, jedoch verwende ich immer wenn ich mit Titeln, die mit grafischen ersetzt später "können" zu tun haben.In den kommenden Tagen wird außerdem eine weitere interessante Technik, um Text mit Grafiken zu ersetzen ... dann sag mir, ob es "nett" ist, wie ich fand ich
Ich will!
[...] Text Replacement ich heute vorstellen bin, ist in mancher Hinsicht sehr interessant. Im Gegensatz zum klassischen Bild mit CSS, um den Betrieb zu ersetzen, verwendet diese Technik, einen Flash-Film, um die Titel unserer Website zu überschreiben. Obwohl er ein [...]