L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX new!
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle

     Referencement
     Créat. de bannière

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
104535 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques
     Création logo

Plus :
     Comparateur de prix
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Hebergement gratuit
     Le PHP facile
     Horoscope
     Comscripts
     WebmasterClub
     Activeartanima...
     Le village de ...
     L'écriteau
     Faro-dessing
     Gifs animés, f...
     Netsources
     Easy-script.com
     Trucs et astuc...
     Je javascript
     Créer son site...
     Les autres
     Votre site ici ?


Article posté par : NoHaR
Date de mise en ligne : 21-10-2006
Niveau : Moyen
>> Ajouter un article

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

Retour à la liste des trucs et astuces





42 visiteurs
actuellement en ligne

    PUBLICITE

Wilogo.com - Création Logo Entreprise

     ANNUAIRE WEBMAST.
1and1
Le leader mondial du hosting debarque en France avec des offres de dédiés à partir de 69 € en debit illimité (à l'heure ou sont ecrites ces lignes).
http://commander.1and1.fr...
Cat : Serveurs dédiés
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

     LES MEMBRES :
55685 membres
8493 comptes CountUs
1508 comptes myCircle

     LES FORUMS :
14 forums
39329 topics
189135 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Referencement" du jour par authon
Vous ne le saviez peut-etre pas mais les deux tiers des annuaires des moteurs de recherche (google, altavista, ...) ont la même base de donnée. C'est l'open directory project ODP. Il suffit de s'y inscire et le tour est joué. Le site pour s'incrire : http://www.dmoz.org
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 19/11/2008 20:12:35 | Design by Studcrea | Gen. en 0.44 sec.