Der Text Replacement-Technik , die ich heute präsentieren ist, in einigen Aspekten sehr interessant. Anders als das klassische Bild Ersatz ist für die Verwendung von CSS , nutzt diese Technik einen Flash-Film, um die Titel unserer Seite zu überschreiben. Obwohl er ein bisschen mehr artikuliert, als es erfordert die Schaffung eines Flash-Films und die Verwendung von JavaScript, erlaubt es, eine Reihe von Vorteilen nicht gleichgültig zu erhalten:
- Hält die "Erreichbarkeit des Geländes mit einem True-unobtrusive JavaScript- so dass Crawler und Spinnen um die Seite zu sehen, auch weiterhin so einfach und richtige HTML-
- Es erfordert nicht die Schaffung von n mal n Bild Titel. Es dauert nur ein Film, um alle Titel von unserer Webseite zu ersetzen, mit einer erheblichen Einsparung im Hinblick auf die Download-
- Es erlaubt Ihnen, einfachen Titel, sondern auch mit Font normalerweise nicht auf dem Web verwendet erstellen
- Text in HTML gerendert werden kann, dank der Features von Flash
- Der Text ist frei wählbar
- Als einen Flash-Film die Sie einfügen können jede Art von Interaktivität und Animationen
Sie werden bemerken, auch, dass in diesem Verfahren sind praktisch keine CSS betrachtet!
Die Werkzeuge, die wir verwenden
Bevor wir sehen, was wir um diese Technik zu verwenden müssen.
- Adobe Flash zu erstellen, den Film, die den Ort unserer Titel zu holen wird
- Die Bibliothek SWFObject einfügen - dynamisch - der Film (Unauffällig)
- Die Bibliothek prototype.js , dies zu automatisieren, werde ich anhand von Beispielen in der neuen Lader Google AJAX API-Bibliothek , aber wenn du willst, kannst du zählen prototype.js auf eigene Faust getrennt
Abgesehen von Flash können die anderen Instrumente mit persönlichen Funktionen oder andere Lösungen ersetzt werden.
Der Flash-Film
Angenommen, wir wollen ein Spiel mit einer bestimmten Schriftart, die das CSS überflüssig macht zu liefern, weil das Problem ist, dass die Schriften nicht auf der Maschine des Endbenutzers installiert werden und muss daher nicht durch den Endbenutzer angezeigt werden:
Öffnen Sie Flash und erstellen Sie einen Film mit einer ähnlichen Größe zu, dass der Titel, den Sie ersetzen möchten. Wie wir sehen werden, ist die Größe, die wichtig eingestellt wird im Design-Zeit kann diese später ohne Auswirkungen auf den Ertrag der Text geändert werden. Legen Sie eine Text-Objekt:
Klicken Sie auf "Embed" und wählen Sie:
Im ersten Frame und fügen Sie diesen Code entwaffnend einfach:
1 2 3 4 5 | / / Funktioniert in jeder Größe scaleMode = StageScaleMode . NO_SCALE ; . Bühne scaleMode = StageScaleMode . NO_SCALE; align = StageAlign . TOP_LEFT ; Bühne align =. StageAlign TOP_LEFT.; / / Ruft den Inhalt Parameter von JavaScript übergeben |
Wir stellen unseren Film als auch (textreplacement.swf) und dann die HTML-Markup, mit ein-'ve gesehen, um so die compatibilià zu maximieren:
1 |
In der Rubrik head der Code einfügen:
1 2 3 4 |
che contiene la stringa del titolo. Die TAG h1 wird durch unsere textreplacement.swf Film ersetzt, mit dem Parameter content , die den Titel-String enthält. In einer Situation komplizierter, da dann mehrere Titel, wird diese Lösung unpraktisch, wenn auch mehr und mehr "spannend" der bloße Austausch über CSS: Klicken Sie hier zum Beispiel (beachten Sie, dass der Text ausgewählt werden kann).
Der Titel zwei in ihrem Inhalt und HTML wird durch Flash-Engine gerendert werden, geschrieben in Rot:
1 | "textreplacement.swf" , "titolo_due" , "544" , "50" , "9.0.0" , null , { content : 'Titolo <font color="#ff0000">due</font>' } ) ; . SWFObject embedSWF ("textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, {content: 'Titel <font color="#ff0000"> zwei </ font>' }); |
Für jeden Titel auf der Seite, in der Tat, müssen wir fügen eine Zeile Javascript in SWFObject Angabe der ID der Titel und Inhalt zu behandeln. Mit prototype.js und das Hinzufügen einer Klasse, die Wertpapiere ersetzt werden abzufangen, können wir schreiben eine einfache Funktion, die alle Titel auf der Seite ersetzen kann mit Flash-Inhalten, wobei die Parameter content direkt aus HTML: Klicken Sie hier zum Beispiel.
1 2 3 | "titolo_uno" class = "text-replacement" >< span > Titolo uno < / span >< / h1 > < h1 id = "titolo_uno" class = "text-Ersatz"> < span > ein Titel </ span > </ h1 > "titolo_due" class = "text-replacement" >< span > Titolo due < / span >< / h1 > < h1 id = "titolo_due" class = "text-Ersatz"> < span > Zweiter Titel </ span > </ h1 > "titolo_tre" class = "text-replacement" >< span > Sono il Titolo Tre un po' più complicato < / span >< / h1 > < h1 id = "titolo_tre" class = "text-Ersatz"> < span > Drei Titel sind ein wenig komplizierter </ span > </ h1 > |
1 2 3 4 5 6 7 8 9 | google. setOnLoadCallback ( function () { ) . each ( $ $ ('H1.text-Ersatz "). Jede ( element ) { function (element) { } ); } ); |
In diesem Fall habe ich google.setOnLoadCallback() , weil mit Google AJAX API-Bibliothek , um prototype.js laden. . Dann werden alle TAG abgefangen h1 mit Klasse Set zu text-replacement . An diesem Punkt wird als SWFObject, um das Element gefunden (einfügen element.id ) unsere Flash-Film. Hinweis, die verwendet wird element.innerHTML auf den Textinhalt abrufen, um zur Flash-Film passieren. Dieser schaltet das TAG tatsächlich span , aber dies ist kein probelma dem Einstellen der Textfeld in Flash-Film in HTML.
Flash, dann erlaubt eine Vielzahl von Effekten (Laufzeit), die diese Technik wirklich "nett" zu machen: Klicken Sie hier zum Beispiel.
Was ich dargestellt ist offensichtlich ein einfaches Beispiel! Allerdings kann der JavaScript-Code und HTML taggature verbessert werden und machen die Technik wirklich spektakulär. Sie können Titel Animation oder Motion Graphics Hintergründen, zusätzlich zu verwenden einfach mit CSS Schriften nicht verwendet werden. Mit entsprechenden Modifikationen kann es zusätzliche Parameter zu unserem Flash-Film passieren, so dass es noch mehr Dynamik: Schriftgröße, Text-Position, um Aktionen für Klick, etc führen ... Sie können auch eine Reihe von Filmen für verschiedene Arten von Wertpapieren zu sein zu ändern, während immer noch eine beträchtliche Einsparung in Bezug auf Download-Zeit!
Hallo! Ich konnte nicht replizieren diese Technik, die, wie falsch er fiel kennt! um ehrlich zu sein konnte ich nicht einmal sehen, Ihrem Beispiel.
Danke und Hallo!
Simona
@ Simo: Jetzt testen! Beispiele werden nicht geladen Bibliothek SWFObject verwendet, um den Flash-Film einzufügen. Genau das, was du bist "gestolpert"?
Ich verstehe immer noch nicht die swf an die Stelle der Wertpapiere in Ihrem Beispiel! Was meine "Übung", ich weiß nicht was ich falsch mache: Ich habe einen Test Fuß und verstehen nicht, wo Sie zu wickeln. Bis zum heutigen Tag meine Online-Tutoring ist getan, wenn ich auf den Boden bekommen Sie wissen lassen! Hallo
@ Simo: Beispiele probabilmenti sehe sie als eine Angelegenheit von schlechten Cache und versuche es erneut ... wenn du sauber alles sollte in Ordnung gehen: zum Teil, weil ich sie sehe gut
Für mich haben bis zu einem gewissen Haken Sie den Code, also lasst uns die Frage beantworten.
Gruß
GF