Trackin
Reflet des textes sur PHP
REFLET SUR DU TEXTE
- 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.
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.
- 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);
?>
Meilleurs partenaires Trackin VIP
