REFLET SUR DU TEXTE
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.
Placez également ce fichier à la racine de votre site : http://www.patrickcleder.com/verdana.gdf Il s’agit d’une police de caractère de type GD Font pour PHP.
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