Teil 3: Image-Replacement
- Image-Replacement
- Teil 2: Image-Replacement
- Teil 3: Image-Replacement
Formatierung Im Prinzip war das alles, was es braucht, damit Sifr seinen Dienst verrichtet. Aber das Beste kommt erst jetzt: das Formatieren der im Flash-Clip gezeigten Schrift. Das erledigen Sie über Anweisungen in der Datei sifr-config.js, die deutliche Anleihen bei CSS nehmen. Beispielsweise f...
Formatierung
Im Prinzip war das alles, was es braucht, damit Sifr seinen Dienst verrichtet. Aber das Beste kommt erst jetzt: das Formatieren der im Flash-Clip gezeigten Schrift. Das erledigen Sie über Anweisungen in der Datei sifr-config.js, die deutliche Anleihen bei CSS nehmen. Beispielsweise färbt der folgende Code die Schrift rot und setzt die Größe auf 21 Pixel:
Sifr.replace(IhreSchrift, {
selector: 'h1',
css: [
'.Sifr-root { color: red;
font-size: 21px; }' ],
wmode: 'transparent'});Mit dem folgenden css-Block formatieren Sie einen in der <h1>-Überschrift enthaltenen Link, sodass er beim Daraufzeigen mit dem Mauszeiger unterstrichen wird:
css: [
'.Sifr-root { color:
#d3031b; }',
'a:link { text-decoration:
none; color: #769c0d; }',
'a:visited { text-
decoration: none; color: #769c0d; }',
'a:hover { text-decoration:
underline; color: #769c0d; }',
'a:active { text-decoration:
underline; color: #769c0d; }'],Auf die gleiche Weise lassen sich auch andere Tags innerhalb eines durch Sifr ersetzten Tags formatieren, zum Beispiel eine Hervorhebung mit <strong>:
css: [
'.Sifr-root { font-size:12px;
font-weight:normal; }',
'strong { font-weight:bold; }'],Eine Übersicht aller für Sifr verständlichen CSS-Anweisungen finden Sie in der Sifr-Dokumentation auf der Programm-Website. Bei Problemen können Sie außerdem statt sifr.js die Datei sifr-debug.js einbinden, die mit erweiterten Meldungen bei der Fehlersuche hilft. Außerdem steht das englischsprachige Forum unter mit Rat und Tat zur Seite.
Feintuning
Es gibt eine ganze Reihe von Parametern, über die Sie Sifrs Erscheinungsbild feinsteuern können. Einer der wichtigsten davon ist TuneHeight, das (vor allem zu große) Innenabstände um eine definierbare Anzahl Pixel korrigiert:
Sifr.replace(IhreSchrift, {
selector: 'h1',
wmode: 'transparent',
tuneHeight: '-5'});In diesem Zusammenhang empfiehlt sich unbedingt ein Blick in die Dokumenta-tion der verschiedenen Sifr-Methoden und -Parameter, die unter online bereitsteht. Dort finden Sie nicht nur Mittel und Wege, um beispielsweise Text mit Gewalt auf eine einzige Zeile zu beschränken oder Filter auf die Flash-Clips anzuwenden, sondern mit modifyContent() sogar eine Möglichkeit, den Text vor dem Ersetzen mit Sifr zu modifizieren.
Als grundsätzliche Maßnahme empfiehlt es sich, die Anzeige des durch Sifr zu ersetzenden Textes während des Ladens zu unterdrücken. Anderenfalls erscheint der Text nur, um kurz darauf ersetzt zu werden, was zu einem unangenehmen Blink-Effekt führt. Bewerkstelligen können Sie das mit einem Eingriff in Sifr-screen.css oder Ihr Screen-Stylesheet:
.Sifr-active h1 { visibility:
hidden; }Mehrere Schriften
Eines der häufigsten Probleme ist vor allem für Javascript-Einsteiger die Integration einer zusätzlichen Schriftart. Diese Aufgabe lässt sich recht leicht lösen. Ansatzpunkt ist wiederum sifr-config.js. Zunächst definieren Sie eine zweite Variable, in der Sie den Pfad zur zusätzlichen Schrift speichern:
var IhreZweiteSchrift = {
src: '/flash/schriftart2.swf' };Natürlich müssen beide Schriften initialisiert werden:
Sifr.activate(IhreSchrift,
IhreZweiteSchrift);Anschließend können Sie auf beide Schriften zugreifen:
Sifr.replace(IhreSchrift, {
selector: 'h1',
wmode: 'transparent'});
Sifr.replace(IhreZweiteSchrift, {
selector: 'h2',
wmode: 'transparent'});Es lohnt sich
Sifr erweitert die typographischen Möglichkeiten des Webdesigners enorm, vorausgesetzt man nimmt in Kauf, dass sich die Wartezeit bis zur vollständigen Anzeige der ersten Seite eines Web-Auftritts etwas hinauszögert. Im Netz finden Sie einige Erweiterungen für Sifr, welche die Clips beispielsweise um Farbverläufe () und andere Effekte bereichern.
Und unter gibt es eine Methode, um Bilder automatisch durch im Browser aufgepeppte Pendants zu ersetzen, die genauso funktioniert wie Sifr.
zm_timkaufmann
