Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 - 6 mars 2009 à 11:51
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 - 8 mars 2009 à 06:06
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 :)
A voir également:

14 réponses

Réponse 1 / 14
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
6 mars 2009 à 12:45
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 ?
0
Réponse 2 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
6 mars 2009 à 13:01
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 ;)
0
Réponse 3 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
6 mars 2009 à 21:26
vous ne savez pas les gars?
0
Réponse 4 / 14
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
6 mars 2009 à 21:33
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
6 mars 2009 à 21:43
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 :(
0
Réponse 6 / 14
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
6 mars 2009 à 22:09
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>
0
Réponse 7 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
6 mars 2009 à 22:13
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
0
Réponse 8 / 14
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
6 mars 2009 à 22:18
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 !!!
0
Réponse 9 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
6 mars 2009 à 22:50
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
0
Réponse 10 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
6 mars 2009 à 23:13
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 ?
0
Réponse 11 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
6 mars 2009 à 23:52
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 -----
0
Réponse 12 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
7 mars 2009 à 09:38
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

++
0
Réponse 13 / 14
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
7 mars 2009 à 14:42
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 !
0
Réponse 14 / 14
Tonyjim Messages postés 68 Date d'inscription lundi 16 février 2009 Statut Membre Dernière intervention 19 juillet 2009 1
8 mars 2009 à 06:06
^^ merci dalida ;)
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses