La technique de remplacement de texte que je 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 un peu plus complexe, nécessitant la création d'une animation Flash et l'utilisation de JavaScript, produit un certain nombre d'avantages considérables:
- Maintient de l'accessibilité »pour le site en utilisant un vrai-Discret Javascript afin que les robots et araignées continuer à voir la page au format HTML simple et correcte
- Il ne nécessite pas la création de titres n par l'image n. Un seul film pour remplacer tous les titres de notre site, avec une économie considérable en termes de téléchargement
- Vous permet également de créer des titres simples mais pas les polices normalement utilisés sur le Web
- Le texte peut être rendu au format HTML, grâce aux fonctionnalités de Flash
- Le texte est sélectionnable
- Comme vous pouvez insérer une animation Flash et animations interactives de toutes sortes
Vous noterez aussi que dans cette procédure sont pratiquement pas considéré comme CSS!
Les outils que nous utilisons
Avant de voir ce que nous devons utiliser cette technique.
- Adobe Flash pour la création du film qui va prendre la place de notre titre
- La bibliothèque SWFObject pour insérer - dynamique - le film (discret)
- La bibliothèque prototype.js pour automatiser cela, je vais utiliser des exemples dans la nouvelle chargeuse Google AJAX API Library , mais si vous voulez, vous pouvez inclure prototype.js sur votre propre séparément
En dehors de Flash, les autres outils sont remplaçables par d'autres fonctions ou des solutions personnelles.
L'animation Flash
Supposons que nous voulons livrer un jeu avec une source en particulier, ce qui rend inutiles CSS car le problème est que les polices ne peuvent être installés sur la machine de l'utilisateur final et donc n'apparaît pas par l'utilisateur final:
Ouvrez Flash et créez un film avec une taille similaire à la façon dont nous voulons remplacer. Comme nous allons voir que ce n'est pas grave la taille du jeu en temps de conception, cela peut être modifié ultérieurement sans affecter le rendement du texte. Insérer un objet Texte:
Cliquez sur "Embed" et sélectionnez:
Dans la première image et insérer ce code d'une simplicité désarmante:
1 2 3 4 5 | / / Fonctionne dans n'importe quelle taille scaleMode = StageScaleMode . NO_SCALE ; stages scaleMode =. StageScaleMode NO_SCALE.; align = StageAlign . TOP_LEFT ; stages align =. StageAlign TOP_LEFT.; / / Récupère le paramètre contenu transmis à partir de JavaScript |
Nous compilons notre film ainsi (textreplacement.swf) et passer ensuite le balisage HTML, un usandone déjà vu, de façon à maximiser la compatibilité:
1 |
Dans la section head de l'insert le code:
1 2 3 4 | "text/javascript" src = "swfobject.js" >< / script > < script de type = "text / javascript" src = "swfobject.js"> </ scripts > "text/javascript" > < script de type = "text / javascript"> swfobject.embedSWF ("textreplacement.swf", "titolo_uno", "544", "50", "9.0.0", null, {content: "un titre '}); </ scripts > |
che contiene la stringa del titolo. Le TAG h1 est remplacé par notre film textreplacement.swf, avec le paramètre content qui contient la chaîne de titre. Dans une situation plus complexe, et avec plus de titres, cette solution devient gênant, mais il est de plus en plus "excitant" le remplacement de simples via CSS: cliquez ici pour exemple (notez que le texte est sélectionnable).
Le titre a une teneur en deux et HTML est affiché par le moteur de Flash, écrit en rouge:
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: "Titre <font color="#ff0000"> deux </ font> ' }); |
Pour chaque titre sur la page, en fait, vous devez insérer une ligne dans SWFObject Javascript indiquant l'identifiant du titre et le contenu à traiter. En utilisant prototype.js et en ajoutant une classe pour intercepter les titres devant être remplacé, nous pouvons écrire une fonction simple qui peut remplacer tous les titres sur la page avec du contenu Flash, en prenant le paramètre content directement à partir de HTML: Cliquez ici par exemple.
1 2 3 | "titolo_uno" class = "text-replacement" >< span > Titolo uno < / span >< / h1 > < h1 id = "titolo_uno" class = "texte de remplacement"> < durée > un titre </ durée > </ h1 > "titolo_due" class = "text-replacement" >< span > Titolo due < / span >< / h1 > < h1 id = "titolo_due" class = "texte de remplacement"> < durée > Titre Deux </ durée > </ h1 > "titolo_tre" class = "text-replacement" >< span > Sono il Titolo Tre un po' più complicato < / span >< / h1 > < h1 id = "titolo_tre" class = "texte de remplacement"> < durée > Titre Trois sont un peu "plus compliqué </ durée > </ h1 > |
1 2 3 4 5 6 7 8 9 | google. setOnLoadCallback ( function () { ) . each ( $ $ ('H1.text-remplacement »). Chaque ( element ) { fonction (element) { } ); } ); |
Dans ce cas, j'ai utilisé google.setOnLoadCallback() que l'utilisation de Google AJAX API Bibliothèque pour charger prototype.js. . Sont ensuite interceptés tous les TAG h1 avec toute la classe au text-replacement . A ce point est appelé SWFObject pour insérer l'élément trouvé ( element.id ) notre animation Flash. Remarque qui est utilisé element.innerHTML pour récupérer le contenu du texte pour passer à l'animation Flash. Ce sera effectivement passer le TAG span , mais ce n'est pas une probelma avoir fixé le champ de texte en Flash movie en HTML.
Flash, permet alors une variété d'effets (runtime) qui font de cette technique vraiment "drôle": cliquez ici par exemple.
Ce que j'ai présenté est évidemment un exemple simple! Cependant, le code Javascript et le code HTML peut être amélioré et rendre la technique vraiment spectaculaire. Vous pouvez insérer des titres dans les milieux d'animation ou de graphisme, en plus de simplement utiliser les polices pas être utilisé par CSS. Avec des modifications appropriées, il peut passer des paramètres supplémentaires à notre animation Flash, ce qui rend encore plus dynamique: Taille de la police, la position du texte, d'effectuer des actions sur le clic, etc ... Vous pouvez également créer un ensemble de films pour différents types de titres à changement, tout en offrant une économie considérable en termes de téléchargement en temps!
Bonjour! Je ne pouvais pas reproduire cette technique, qui sait ce que l'erreur a été capturé! pour être honnête je ne pouvais même pas voir votre exemple.
Merci et bonjour!
Simona
@ Simo: essayez-le maintenant! Les exemples ne pas charger la bibliothèque SWFObject utilisé pour insérer le film Flash. Exactement ce que vous «trébuché»?
Je ne vois toujours pas le swf à la place des valeurs mobilières dans votre exemple! Quant à mon «exercice», je ne sais pas ce que je fais mal: j'ai fait un piéton, je ne comprends pas où vous envelopper. A ce jour, mon tutorat en ligne est terminée, si je peux comprendre qu'il en laisse, vous savez! bonjour
@ Simo: Exemples probabilmenti les voir comme une question de cache mal et essayez à nouveau ... si vous tout propre devrait aller tout droit: en partie parce que je les vois bien
Pour l'attelage moi d'avoir un peu de votre code, nous allons donc régler la question.
Salutations
GF