Ecrire au dessus d'une cellule avec image ...

[Résolu/Fermé]
Signaler
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
-
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
-
Bonjour à tous ;) ,

voila, j'ai fais une barre de progression graphique pour voir les jeton arcade restant de mes utilisateurs .

dans l'exemple l'utilisateur lui reste 20% de ses jetons ...

voici le code simplifié pour l'exemple :

$mult = 20;

$i = 1;
echo '<table><td style="border: solid 1px;" width="100px" height="15px">';

while($i <= $mult)
{
echo"<img src=image/progress.jpg width=1px height=15px>";
$i++;
}
echo '</td></table>';

se qui donne un cadre de 100 px avec 20 px mis en vert ...

ma question c'est comment si c'est possible puis-je faire pour noter "20 / 100"
centrer dans ce cadre, et pas centrer dans le vert (dans la progression)?

j'espere que j'ai été suffisement claire pour que vous sachier me répondre ....

merci d'avance pour vos réponse ;)

Bonne journée à tous :)

14 réponses

Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
464
Si la cellule ne contient que l'image, en mettant simplement le texte avant, il sera au dessus de la barre.
Tu le veux centrer mais horizontalement? verticalement? les deux?

Autre chose. T'aurai pas oublié les deux <tr> dans ton tableau?
Pourquoi ne pas mettre tout simplement un div ?
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
salut arthezius ;)

merci pour ta réponse

ha oui , j'ai oublié les <tr></tr> dans l'exemple .... oups :)

non, au dessus du cadre, ca ne correspond pas a ce que je chercher :/

voici le resultat que j'ai actuellement : http://tonyjim.ns7-wistee.fr/photo2/tonyjim/resultat_actuel.jpg

voici le resultat souhaité : http://tonyjim.ns7-wistee.fr/photo2/tonyjim/resultat_voulu.jpg

pour le div, je ne connais pas bien .....

mais si le résultat est pareil moi ..... pas de soucis ;)
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
vous ne savez pas les gars?
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
salut,

tu crées un bitmap à la volée (en mettant en cache pour les prochaines fois) pour faire la barre de progression en utilisant la librairie GD.

et tu mets ce bitmap en arrière plan de n'importe quelle balise (le mieux étant sans doute un <p>) avec CSS.
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
salut Dalida ;)

heeeee escuse mais j'ai pas compris grand chose :(

voici le code ou ton lien m'as amener :

<?php

header("Content-type: image/png");
$string = $_GET['text'];
$im = imagecreatefrompng("images/button1.png");
$orange = imagecolorallocate($im, 220, 210, 60);
$px = (imagesx($im) - 7.5 * strlen($string)) / 2;
imagestring($im, 3, $px, 9, $string, $orange);
imagepng($im);
imagedestroy($im);

?>

mais heee je vois pas se que je dois en faire :(
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
si tu vois de suite, laisse tomber c'est un peu compliqué tout de même !

tu peux aussi te créer 100 bitmaps différents (une par %) et donne une classe à ton <p> qui donne le nombre de pour-cent.
<p style="background-image:url(50.png)">50%</p>
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
ha non, laisser tombé !

pas trop le genre ;)

je trouverai c'est certain ;)

oui l'idée de faire 100 image n'est pas mauvaise :)

mais il doit y avoir plus simple je suis sure, je dois encore continuer mes recherches .....

j'écrirai la solution à ce post à la suite quand j'aurai trouvé ;)

merci quand mêmes
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
l'idée de faire 100 image n'est pas mauvaise
ben le lien c'était pour ça, mais au lieu de te les faire à la main, tu les fait faire par PHP.

si tu veux continuer sur cette piste pas de soucis, dis le nous, on continue !!!
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
Ha oui ok ca me faisait peur de faire les 100 images :/

oui si php le fais à ma place, c'est autre chose :) hi hi

voila, j'ai mis le code qui se trouvais sur le liens que tu m'as donné dans un .php que j'ai placé a la racine de mon site ( ça j'ai compris ) ;)

le voici :

<?php

header("Content-type: image/png");
$string = $_GET['text'];
$im = imagecreatefrompng("images/button1.png");
$orange = imagecolorallocate($im, 220, 210, 60);
$px = (imagesx($im) - 7.5 * strlen($string)) / 2;
imagestring($im, 3, $px, 9, $string, $orange);
imagepng($im);
imagedestroy($im);

?>

j'ai modifié la 3eme ligne avec mon image :

$im = imagecreatefrompng("image/stat/progress.png");

et j'ai ajouter a la suite :
<p style="background-image:url(50.png)">50%</p>

se qui donne au final :

<?php

header("Content-type: image/png");
$string = $_GET['text'];
$im = imagecreatefrompng("image/stat/progress.png");
$orange = imagecolorallocate($im, 220, 210, 60);
$px = (imagesx($im) - 7.5 * strlen($string)) / 2;
imagestring($im, 3, $px, 9, $string, $orange);
imagepng($im);
imagedestroy($im);

?>

<p style="background-image:url(50.png)">50%</p>

mais quand je lance la page, il note :

L'image "http://localhost/headust46vstonyjim/creation_progress.php" ne peut être affichée car elle contient des erreurs.

bhein voila ou j'en suis .....

tu sais encore m'eclairer un peu ;)

Merci d'avance
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
et si je mettait tout simplement l'image comme font de cellule du "<td>" ?

ca fonctionne comme ceci :

echo '<table><tr><td background="image/stat/progress.png" style="border: solid 1px;" width="100px" height="15px">';
echo '<center>20 / 100</center>';
echo '</td></tr></table>';

seulement je ne sais pas comment lui dire que l'image de background ne fais que 20px de width :(

j'ai essayer : <td background="image/stat/progress.png width:20px" .....

mais ca marche pas :(

tu as une idée la dessus ?
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
sinon, pour en revenir a ta premiere solution, je viens de trouver un tuto complet ;)

https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/916429-creez-des-images-en-php

je jetterai un oeil demain, la je vais dodo!

passez une bonne nuit ;)

a Demain

----- Tonyjim -----
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
ha oui, je te lève mon chapeau Dalida ;)

merci beaucoup, tu m'as orienter vers la bonne fonction ^^

mais je ne la comprennais pas :(

grace a cette fonction, j'ai exactement le résultat que je souhaitais et plus encore !

pour ceux que ca interesse, comment j'ai fait :

j'ai créer un fichier php que j'ai appelé : "image.php" et que j'ai placer a la racine de mon site avec dedant :

<?php
header ("Content-type: image/png");

$width = $_GET['width'];

$image = imagecreate($width,30);

if($width <= 20)
{
	$red = imagecolorallocate($image, 255, 0, 0);
}
elseif($width > 20 AND $width <= 40)
{
	$orange = imagecolorallocate($image, 255, 128, 0);
}
else
{
	$green = imagecolorallocate($image, 0, 255, 0); 
}

imagepng($image);
?>


et la ou je devais placer mon image, j'ai mis :

<?php
$mult = 20;

echo "<table>
                <tr>
                     <td background=\"image.php?width=$mult\" style=\"border: solid 1px;background-repeat: no-repeat;\" width=\"98px\" height=\"15px\">";

echo"
<center>$mult / 100</center>";

echo '             </td>
                </tr>
          </table>';
?>


et voila !!

c'est magique!

si vous ne comprenez pas ce bout de code, faite comme moi, suivez ce tuto :

https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/916429-creez-des-images-en-php

Encore merci Dalida ;)

Bonne journée

++
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
salut,

alors là bravo !

tu as continué et réussi à boucler ça pendant que j'étais déjà… au lit !
et tu as mis en place exactement ce à quoi je pensais.

encore bravo et bon courage pour la suite !
Messages postés
68
Date d'inscription
lundi 16 février 2009
Statut
Membre
Dernière intervention
19 juillet 2009
1
^^ merci dalida ;)