Ce tutoriel vous permettra de créer un effet de reflet à vos textes. Effet sympa pour le design de certains de vos titres par exemple.
Votre page doit être liée à la dernière version de jQuery (jquery-1.4.2.js)
Si ce n'est pas le cas, vous pouvez télécharger ce fichier sur http://api.jquery.com/
Ensuite, placez le code suivant entre les balises <head></head> :
<script type="text/javascript" src="jquery-1.4.2.js"></script>
Effectuez la même procédure pour le fichier suivant : http://www.patrickcleder.com/reflet.js Ce dernier comprend les fonctions de reflet.
Téléchargez le fichier Verdana.gdf ICI et placez le également ce fichier à la racine de votre site.
Collez ce code dans l'éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site.
<!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <!--Lien à jQuery --> <script type="text/javascript" src="jquery-1.4.2.js"></script> <!--Lien au fichier générant le reflet --> <script type="text/javascript" src="reflet.js"></script> <!--Style general de la page --> <style> body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;} </style> <script type="text/javascript"> <!--Méthode évitant le conflit avec d'éventuels plugins jQuery lies sur cette même page--> jQuery.noConflict(); jQuery(function(){ <!--Evénement sur le clic du bouton de la page--> jQuery("#creation").click(function(){ <!--Suppression de tous les éléments contenus dans la div "demo"--> jQuery("#demo").empty(); <!--La page implémente l'effet de reflet à tous les éléments appartenant à la classe "reflet". Le setTimeout permet de laisser le temps au serveur de créer l'image.--> setTimeout("ajoutReflet();",500); <!--Ajout d'une image dans la div "demo" La source de cette image est créée à la volée via un appel à la page createImage.php (Voir script de la page plus bas avec un passage de paramètre correspondant au contenu de la zone de saisie).--> jQuery("#demo").append ('<img id="img1" src="createImage.php?texte=' + document.getElementById("texte").value + '" class="reflet" />'); }); }); </script> </head> <body> <br> <!--Présentation de la page--> <font style="color:#FFFF00"> SAISISSEZ UNE CHAINE DE 20 CARACTERES MAX ET CLIQUEZ SUR LE BOUTON POUR PRODUIRE UN EFFET DE REFLET </font> <br> Affichez le code source ou cliquez <a href="newsletter.php" style="color:#FFFF00;text-decoration:none">ici</a> pour recevoir le tutoriel par mail. <br><br> <br> <br> <!--Zone de saisie--> <input id="texte" type="text" name="texte" size="25" maxlength="20" /> <br> <br> <!--Bouton--> <input id="creation" type="button" value="Générer le reflet de votre texte" width="200px" /> <br> <!--Div conteneur de l'image--> <div id="demo"></div> </body> </html>
Copiez ce script et sauvegardez-le dans un fichier nommé createImage.php
<?php //Détermination du type de fichier récupéré à l'appel de la page. header ("Content-type: image/png"); //Récupération du texte saisi $param = $_REQUEST['texte']; //Création d'une image de largeur 1000px et de hauteur 100px $im = ImageCreate (1000, 100) or die ("Erreur lors de la création de l'image"); //Détermination de la couleur de fond //(Dans l'exemple : RGB(0,0,0) correspondant à la même couleur //que la page d'affichage (Noir) $couleur_fond = ImageColorAllocate ($im, 0, 0, 0); //Détermination de la couleur de texte $textcolor = imagecolorallocate($im, 255, 255, 255); //Chargement de la police de caractères $font = imageloadfont('verdana.gdf'); //Ecriture et positionnement de la chaine récupérée sur l'image imagestring($im, $font, 5, 22, $param, $textcolor); //Génération de l'image ImagePng ($im); ?>
Page de démonstration : http://www.patrickcleder.com/tuto_25.php