 |
|
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX Cours de JavaScript Liste de discussion Forums CountUs myCircle ClickInText XooIt HTML / CSS PHP / MySQL Réferencement Graph / Présentation Toutes les astuces Ajouter un article
 
Hebergement web Referencement Sites webmasters XHTML - CSS2 PHP Affiliation - Pub FAI Annuaire webmaster Kit graphique Foire aux questions Les membres Devenir annonceur Faire un lien Contact Compteur live Créer un forum Le PHP facile Comscripts Liens sponsorisés Page Rank Gifs animés, f... Le village de ... Easy-script.com Poésie et cita... Les kits graph... La cuisine de ... Azote.org - no... Web creation ... Créer son site... Electroniq... Les autres Votre site ici
? |
Position du problème
Vous faites un site dont les membres uploadent des images dans leur espace personnel (à espace limité), ou vous avez bêtement besoin d'afficher un pourcentage avec une petite barre qui se remplit de manière dynamique. C'est à dire qu'après avoir calculé un pourcentage, vous voulez l'afficher et le faire figurer par une petite jauge. Solution proposée
Dans un premier temps, on va voir comment générer automatiquement une image au format "png" avec PHP correspondant à notre jauge, puis nous verrons comment l'inclure dans votre page. Pré-requis
Vous avez besoin d'avoir activé la librairie GD (ou GD2) de PHP. Sur la plupart des hébergeurs, elle est déjà opérationnelle, mais vous aurez besoin de le faire manuellement si vous utilisez une solution de développement telle que "easy PHP". BON ! Passons au code !
Le code suivant, que l'on enregistrera dans une page "compteur.php" génère votre image. Pour le tester, il suffit d'appeler la page : "compteur.php?pc=34" dans l'éventualité ou vous voulez 34%... vous pouvez aussi demander 15.8%...
<? /*cette fonction indique que la page devra etre interprétée comme une image PNG*/ header ("Content-type: image/png"); /*on crée une image de 150 pixels de large sur 15 de haut*/ $image = imagecreate(150,15); /*Ici, on récupère dans la variable $pc le pourcentage que l'on veut afficher la page est appelée par compteur.php?pc=[un nombre entre 0 et 100]*/ if(isset($_GET['pc'])) { $pc=$_GET['pc']; } /* pour une image de 150 px, la partie à remplire en pourcentage fait 148px... on calcule la longueur à remplir en pixels */ $x=($pc*148)/100; /*définition des couleurs... l'image est automatiquement remplie avec la première couleur que vous définissez. Ici on aura un fond blanc */ $blanc=imagecolorallocate($image, 255, 255, 255); $noir=imagecolorallocate($image, 0, 0, 0); $bleu=imagecolorallocate($image, 170, 204, 238); /*on fait un petit cadre noir sur le pourtour de l'image*/ imagerectangle($image, 0, 0, 149, 14, $noir); /*dessin du remplissage en fonction de $x : on dessine un rectangle de $x pixels de large rempli en bleu*/ imageFilledRectangle($image, 1, 1, $x, 13, $bleu); /*on place le texte au milieu : [$pc %]...*/ imagestring($image, 3, 65, 1, $pc."%", $noir); /*Pour finir, on génère l'image en png§ */ imagepng($image); ?> Comment mettre cette image auto-générée sur ma page ?
C'est bien beau de générer une image automatiquement, mais encore faut-il être capable de l'afficher... Comme je vous l'ai dit, la page php sera interprétée comme une image, donc on l'appelle de maniere transparente :
<html> <head> <title>Mon compteur</title> </head> <body> Il vous reste 34% sur votre espace... <br/> <img src="compteur.php?pc=34"> </body> </html> Resultat :  Ou encore...
<? /*la fonction pourcentage() est fictive.. elle est supposée calculer ce que vous voulez symboliser !*/
$pourcentage=pourcentage()?> <html> <head> <title>Mon compteur</title> </head> <body> Il vous reste <?echo $pourcentage?> % sur votre espace... <br/> <img src="compteur.php?pc=<?echo $pourcentage?>"> </body> </html> Annotations des visiteurs :
Pas d'annotation pour cette astuce. >> Poster une annotation sur cette astuce
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
 |
 |
La mini-astuce "Graphisme / Présentation" du jour par caaptusss N'hésitez pas à utiliser les figures de styles (CSS) sur votre site web ! Elles vous permettent de modifier la police et les tableaux de votre page en un coup de souris ! En effet, toutes les règles d'affichages sont réunnient dans un seul fichier ! Le rêve non ? Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2010 EJS - Tous droits réservés | CNIL N° 844440 | 14/03/2010 19:46:37 | Design by | Gen. en 0.503 sec.
|
 |