1. Éléments de préparation
1) Remplacez le fichier de police JS
Code js:
fonction com_stewartspeak_replacement () {/ * Générateur de capture dynamique par Stewart Rosenberger http://www.stewartspeak.com/headings/ Ce script recherche via une page Web pour des éléments spécifiques ou généraux et les remplace par des images dynamiquement générées, en conjonction par un script de serveur. Les deux premiers paramètres doivent être modifiés var TESTURL = "Dynatext / Loading.gif"; // Modifier au chemin d'image correspondant var DonOtprintimages = false; var princecss = "remplacement-print.css"; var hideflicker = false; var hideflickercss = "remplacement-screen.css"; var hideflickertimeout = 100; // les modifications responsables peuvent être apportées ici / * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Javascript. Et saisir un soda ou quelque chose. * / Var items; var ImageLoaded = false; var documentloaded = false; Fonction RemplaceSelector (sélecteur, url, wordwrap) {if (typeof items == "Undefined") items = new Array (); items [items.length] = {sélecteur: sélecteur, url: url, wordwrap: wordwrap};} if (hideflicker) {document.write ('<link id = "hide-flicker" rel = "Stylesheet" media = "screp" href = "' + hideflickerss + '" />'); window.flickercheck = function () {if (! ImageLoaded) setStylesHeetState ('hide-flicker', false); }; setTimeout ('window.flickercheck ();', hideflickertimeout)} if (donotprintimages) document.write ('<link id = "print-text" rel = "Stylesheet" media = "print" href = "' + princecss + '" />'); var test = new Image (); test.onload = function () {ImageLoaded = true; if (documentlowed) remplacement (); }; test.src = Tesurl + "? Date =" + (new Date ()). GetTime (); addloadHandler (function () {documentloaded = true; if (imageLoaded) remplacement ();}); fonction documentload () {documentloaded = true; if (ImageLoaded) remplacement ();} fonction remplacement () {for (var i = 0; i <items.length; i ++) {var elements = getElementsBySelector (items [i] .selector); if (elements.length> 0) pour (var j = 0; j <elements.length; j ++) {if (! elements [j]) continue; var text = extractText (Elements [J]); tandis que (éléments [j] .haschildNodes ()) éléments [j] .removechild (éléments [j] .firstchild); var tokens = items [i] .wordwrap? text.split (''): [text]; pour (var k = 0; k <tokens.length; k ++) {var url = items [i] .url + "? text =" + Escape (tokens [k] + '') + "& selector =" + Escape (items [i] .selector); var image = document.CreateElement ("img"); image.classname = "remplacement"; image.alt = tokens [k]; image.src = url; Elements [J] .APPEndChild (image); } if (donotprintimages) {var span = document.createElement ("span"); span.style.display = 'Aucun'; span.classname = "print-text"; span.appendChild (document.CreateTextNode (texte)); Elements [J] .APPEndChild (Span); }}} if (hideflicker) setSTylesHeetState ('hide-flicker', false);} fonction addloadHandler (handler) {if (window.addeventListener) {window.addeventListener ("Load", Handler, false); } else if (window.attachevent) {window.attachevent ("onload", mannequin); } else if (window.onload) {var oldHandler = window.onload; window.onLoad = function piggyback () {oldHandler (); Handler (); }; } else {window.onload = handler; }} fonction setStylesHeetState (id, activé) {var sheet = document.getElementById (id); if (sheet) sheet.disabled = (! activé);} fonction extractText (élément) {if (typeof element == "string") return elem; else if (typeof element == "Undefined") élément de retour; else if (element.innertext) return element.innerText; var text = ""; var kids = element.childNodes; for (var i = 0; i <kids.length; i ++) {if (kids [i] .nodeType == 1) text + = extractText (kids [i]); else if (kids [i] .NodeType == 3) texte + = enfants [i] .Nodevalue; } RETOUR Texte;} / * trouve des éléments sur la page qui correspondent à une règle de sélecteur CSS donnée. Certaines règles compliquées ne sont pas compatibles. Basé sur l'excellente fonction "Getelements SynElector" de Simon Willison. Code d'origine (avec commentaires et description): http://simon.incutio.com/archive/2003/03/25/getElementsBySelector*/Fonction GetElementsYselector (Selector) {var tokens = selector.split (''); var currentContext = nouveau tableau (document); pour (var i = 0; i <tokens.length; i ++) {token = tokens [i] .replace (/ ^ / s + /, ''). Remplace (// s + $ /, ''); if (token.indexof ('#')> -1) {var bits = token.split ('#'); var tagname = bits [0]; var id = bits [1]; var element = document.getElementById (id); if (tagname && element.nodename.tolowercase ()! = tagName) return new Array (); currentContext = nouveau tableau (élément); continuer; } if (token.indexof ('.')> -1) {var bits = token.split ('.'); var tagname = bits [0]; var classname = bits [1]; if (! tagName) tagname = '*'; var trouvé = nouveau tableau; var FoundCount = 0; pour (var h = 0; h <currentContext.length; h ++) {var Elements; if (tagname == '*') elements = currentContext [h] .all? currentContext [h] .all: currentContext [h] .getElementsByTagName ('*'); else elements = currentContext [h] .getElementsByTagName (tagName); pour (var j = 0; j <elements.length; j ++) trouvé [FoundCount ++] = elements [j]; } currentContext = nouveau tableau; var currentContextIndex = 0; pour (var k = 0; k <fondé.length; k ++) {if (find [k] .classname && fin [k] .classname.match (new regexp ('// b' + className + '// b'))) currentContext [currentContextIndex ++] = find [k]; } continuer; } if (token.match (/ ^ (/ w *) / [(/ w +) ([= ~ / | / ^ / $ / *]?) =? "? ([^ /]"] *) "? /] $ /)) {var tagname = regexp. 1 1; var attRname = regexp. 2; var attroperator = regexp. if (! TagName) Tagname = '*'; CurrentConted [h] .getHetElementsByTagName (TagName); Attribution);}; Break; Regexp ('^' + attrvalue + '-?')); }; }; Found = New Array; var FoundCount = 0; SPOPE, EXECUTER CodeIF (document.CreateElement && document.getElementsByTagName &&! Navigator.UserAgent.match (/ opera //? 6 / i)) com_stewartspeak_replacement ();2) Générez le fichier PHP de l'image
<? Php / * Générateur de cap dynamique par Stewart Rosenberger http://www.stewartspeak.com/headings/ Ce script génère des images de texte PNG, écrites dans la police / taille que vous spécifiez. Ces images PNG sont ramenées au navigateur. Facultativement, ils peuvent être mis en cache pour une utilisation ultérieure. Si une image en cache est trouvée, une nouvelle image ne sera pas générée et la copie existante sera envoyée au navigateur. Une documentation supplémentaire sur les capacités de traitement d'images de PHP peut être trouvée sur http://www.php.net/image/ * / $ font_file = 'Trebuc.ttf'; // Le xiuga $ FONT_SIZE = 23; ; $ transparent_background = true; $ cache_images = true; $ cache_folder = 'cache'; / * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ; $ send_buffer_size = 4096; // Vérifiez GD SupportIF (! Function_Exists ('ImageCreate')) fatal_error ('Erreur: le serveur ne prend pas en charge la génération d'images PHP'); // Nettoyer Textif (vide ($ _ get ['text'])) fatal_error ('error: pas de texte spécifié.'); $ text = $ _get ['text']; if (get_magic_quotes_gpc ()) $ text = stridslashes ($ text); $ text = javascript_to_html ($ text); // Recherchez une copie en cache, envoyez si elle existe $ hash = md5 (basename ($ font_file). $ font_size. $ font_color. $ background_color. $ transparent_background. $ text); $ cache_filename = $ cache_folder. '/'. $ hash. $ extension; if ($ cache_images && ($ file = @fopen ($ cache_filename, 'rb'))) {header ('contenu-type:'. $ mime_type); while (! feof ($ file)) imprimer (($ buffer = Fread (fichier $, $ send_buffer_size))); fclose (fichier $); exit;} // vérifier la disponibilité de la police $ font_found = is_readable ($ font_file); if (! $ font_found) {fatal_error ('error: le serveur manque la police spécifiée. hex_to_rgb ($ font_color); $ dip = get_dip ($ font_file, $ font_size); $ box = @imagettfbbox ($ font_size, 0, $ font_file, $ text); $ image = @imagecreate (ABS ($ box [2] - $ box [0]), ABS ($ box [5] - $); ! $ box) {fatal_error ('Erreur: le serveur n'a pas pu créer cette image de cap. ImageColorAllocate ($ image, $ font_rgb ['red'], $ font_rgb ['vert'], $ font_rgb ['bleu']); ImageTtFText ($ image, $ font_size, 0, - $ box [0], ABS ($ box [5] - $ box [3]) - $ box [1], $ font_color, $ font_file, $ text); // Définissez transparent ($ transparent_background) ImageColOrTransparent ($ Image, $ background_color); En-tête ('Content-Type:'. $ MIME_TYPE); ImagePng ($ Image); // Enregistrer la copie de l'image pour cacheif ($ cache_images) {@imagepng ($ image, $ cache_filename);} iMageDestRoy ($ image); sortie ; / * Essayez de déterminer le "DIP" (Pixels abandonné sous la ligne de base) de cette police pour cette taille. * / fonction get_dip ($ font, $ size) {$ test_chars = 'abcdefghijklmnopqrstuvwxyz'. «Abcdefghijklmnopqrstuvwxyz». «1234567890». '! @ # $% ^ & * () /' "" ///;.., `~ <> [] {} - + _- = '; $ box = @imagettfbbox ($ size, 0, $ font, $ test_chars); return $ box [3];} / * tenter de créer une image contenant l'erreur donnée. Si cela fonctionne, l'image est envoyée à l'image Browser en tant que code 500 à la place. * / fonction fatal_error ($ message) {// Envoyez une image if (function_exists ('imageCreate')) {$ width = ImageFontWidth (5) * strlen ($ message) + 10; ImageColorallocy ($ Image, 255 255 255); En-tête de code 500 ("HTTP / 1.0 500 Erreur du serveur interne"); if (substr ($ hex, 0,1) == '#') $ hex = substr ($ hex, 1); substr ($ hex, 2,1);} if (strlen ($ hex)! = 6) fatal_error ('erreur: couleur non valide "'. $ hex. '' '); $ rgb ['bleu'] = hexdec (substr ($ hex, 4,2); preg_match_all ('/% u ([0-9a-f] {4}) / i', $ text, $ correspond); '& #'. hexdec ($ correspond [1] [$ i]). ';', $ text);3) les polices requises
Ici, vous mettez le moi requis dans le même répertoire que les fichiers JS et PHP (vous pouvez également le modifier, mais le fichier correspondant doit également être modifié)
4) bibliothèque GD2 de PHP
2. Code HTML implémenté
<? Php // Chargez la bibliothèque Utils Popup Utils // require_once 'include / popup_utils.inc.php';?> <! doctype html public "- // w3c // dtd xhtml 1.1 // en "" http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd "> <html> <éad> <Title> Optimisation de moteur de recherche professionnelle avec php: table de contenu </ title> <script type =" text / javascrip </ head> <body onload = "window.resizeto (800,600);" onResize = 'setTimeout ("Window.Resizeto (800,600);", 100)'> <h1> Optimisation de moteur de recherche professionnel avec PHP: Table des matières </h1> <? PHP // Afficher la navigation popup uniquement lorsque le visiteur provient d'un SERP // display_navigation (); // display_popup_navigation (); ?> <Ol> <li> Vous: programmeur et moteur de recherche (/ li> <li> Une amorce dans le référencement de base </li> <li> URL provocateur en SE </li> <li> Relocalisation de contenu et codes d'état HTTP </li> <li> Contenu en double </li> <li> SE-Friendly html and javascrip Bookmarking </li> <li> Black Hat SEO </li> <li> Sitemaps </li> <li> Bât de liaison </li> <li> Course IP, géo-ciblage et livraison IP </li> <li> SEO de langue étrangère </li> <li> Copage avec des problèmes techniques </li> <li> Clinique de site: So vous avez un site Web? </li> <li> Blog? </li> <li> Introduction à l'expression régulière </li> </l> </ body> </html>3. Comparaison avant et après utilisation
Avant utilisation
Après utilisation