Donnez du reflet à vos textes !

Dernière mise à jour le par pijaku .

Donnez du reflet à vos textes !

Description

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.

CONSIGNES

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.

HTML & jQuery

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>

PHP

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

Ce document intitulé « Donnez du reflet à vos textes ! » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Mise en place d'un systeme de cache rapidement
Mysql/php les base de données
Rejoignez-nous