begin process at 2012 02 11 01:46:03
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > IMAGE DYNAMIQUE ET MAPPING : LA GRILLE DU LOTO

IMAGE DYNAMIQUE ET MAPPING : LA GRILLE DU LOTO




 Description

Cliquez pour voir la capture en taille normale
J'ai fait cette source pour Tomcube et Defkrie en rapport à un message du forum.
Le problème était de faire une grille de loto (ou autre) dynamique avec un mapping (lien hypertexte différent sur plusieurs zone de l'image).

Cette source montre clairement :
+ Comment créer une image
+ Comment écrire dessus
+ Comment effacer toutes les images d'un répertoire
+ Faire du mapping dynamique

Cette source marche trés bien. Testée, avant d'être postée, sous Easy php 1.6 (sans modif du php.ini) avec Opéra.
Pas de zip, un copier coller et c'est bon :D

Source

  • <?
  • function loto($nombre)
  • {
  • $masknum = "^[0-9]+$";
  • if ($nombre <> '' && ereg($masknum,$nombre))
  • {
  • // on vire les images .jpg du répertoire
  • // Vous noterez le joli copier/coller de l'aide php lol
  • $handle=opendir('.'); // on ouvre le dossier
  • while ($file = readdir($handle)) { // tant qu'il y a des fichiers
  • if ($file != "." && $file != "..") // si c'est pas un dossier
  • {
  • if (ereg(".jpg$", $file)) // si la fin du fichier est .jpg
  • {
  • @unlink($file); // on vire le fichier
  • }
  • }
  • }
  • closedir($handle);
  • // Ici c au cas ou le script est dans un dossier a part
  • // Si vous voulez virer juste l'image de la grille faire unlink($grille.jpg");
  • $texte = array(); // Tableau qui contiendra les lignes de numéros
  • $index_array = 0; // Index du tableau pour l'affichage des lignes
  • $la_ligne = ''; // Variable temporaire pour la listes des numéros a mettre dans le tableau
  • $coord_map = ''; // liste des coordonnées pour le mapping
  • $lien_clique = "#"; // lien pour le mapping
  • $largeur_map = 18; // largeur d'une zone de mapping (1 numéro quoi)
  • $hauteur_map = 20; // hauteur d'une zone de mapping (pareil qu'au dessus)
  • $coord_1 = 8; // coordonnée de départ pour le mapping - COTE GAUCHE |
  • $coord_2 = $coord_1 + $largeur_map;// coordonnée de départ pour la mapping (on ajoute simplement la largeur a la coordonnée du coté gauche) - COTE DROIT |
  • $coord_3 = 9; // coordonnées de départ pour le mapping - HAUT DU MAPPING _
  • $coord_4 = $coord_3 + $hauteur_map; // coordonnées de départ pour le mapping - BAS DU MAPPING _
  • /*
  • Visualisation graphique d'une zone de mapping
  • 3
  • ------------
  • 1 | | 2
  • ------------
  • 4
  • */
  • //Génération du tableau qui contient les numéros
  • for ($i=1;$i<$nombre+1;$i++) // ici on ajout 1 au nombre cherché car i commence à 1
  • {
  • $le_nombre = $i; // on met i en variable pour mieux le manipuler sans briser la boucle.
  • if (strlen($le_nombre) == 1) // si la longueur de la chaine i est égale à 1 alors on ajoute un 0 devant pour faire plus beau (et accessoirement ça facilite le mapping lol)
  • {
  • $le_nombre = "0".$le_nombre;
  • }
  • $la_ligne .= " ".$le_nombre; // On concatène dans la variable la ligne de nombre
  • // On concatène les divers area de mapping pour les numéros
  • $coord_map .= "\n<area shape=\"rect\" coords=\"$coord_1,$coord_3,$coord_2,$coord_4\" href=\"".$lien_clique.$i."\">";
  • // Nouvelle coordonnées pour les numéros suivants
  • $coord_1 = $coord_2;
  • $coord_2 = $coord_2 + $largeur_map;
  • // j'ai décidé de coupé les lignes à chaque multiple de 10 (pour le loto ça fait plus beau)
  • // Si vous décidez de modifier l'affichage c'est ici que vous devez mettre les conditions
  • if (substr($i,-1,1) == '0' || $i == $nombre)
  • {
  • $texte[$index_array] = $la_ligne; // On ajoute dans le tableau la 1ere ligne de nombre
  • $index_array++; // On implémente de 1 pour dire dans quelle ligne du tableau on ajoutera la liste des nombres au prochain passage de la boucle
  • $la_ligne = ''; // la ligne a été ajouté donc on la vide
  • $coord_3 = $coord_3 + $hauteur_map; // On change la ligne de reférence du mapping HAUT pour passer à la ligne suivante
  • $coord_1 = 8; // Nouvelle coordonnée du mapping pour le COTE GAUCHE
  • $coord_2 = $coord_1 + $largeur_map; // Nouvelle coordonnée du mapping pour le COTE DROIT (on ajoute la largeur de la zone de mapping)
  • $coord_4 = $coord_3 + $hauteur_map; // Nouvelle coordonnée du mapping pour le BAS (on ajoute la hauteur de la zone de mapping)
  • }
  • }
  • $coord_haut = 10; // Coordonnée du texte à écrire en fonction du haut de l'image
  • // creation de l'image
  • $image = imagecreate(200,115);
  • // Couleur de fond de l'image
  • $fond = imagecolorallocate($image,0,0,0);
  • // couleur de la police
  • $couleur = imagecolorresolve($image,255,255,255);
  • for ($j=0;$j<count($texte);$j++) // Boucle jusqu'à la fin du tableau des nombres
  • {
  • imagestring($image,2,5,$coord_haut,$texte[$j],$couleur); // On écrit sur l'image la 1ere ligne de nombres (contenu dans le tableau $texte[])
  • $coord_haut = $coord_haut + 20; // Nouvelle coordonnée de la ligne de nombres à écrire
  • }
  • // Création de l'image à afficher
  • imagejpeg($image,"grille.jpg",70);
  • // Libération des ressources, on vire l'image généré de la mémoire
  • imagedestroy($image);
  • // Affichage de l'image
  • echo "<img src=\"grille.jpg\" usemap=\"#loto\">";
  • // Affichage des coordonnées du mapping
  • echo "<map name=\"loto\">";
  • echo $coord_map;
  • echo "\n</map>";
  • }
  • else
  • {
  • $image = imagecreate(215,35);
  • // Couleur de fond de l'image
  • $fond = imagecolorallocate($image,0,0,0);
  • // Couleur de la police
  • $couleur = imagecolorresolve($image,255,255,255);
  • // On ajoute le message d'erreur
  • $message_erreur = ":: hum Faudrai un chiffre la ;) ::";
  • imagestring($image,2,5,10,$message_erreur,$couleur);
  • // Création de l'image à afficher
  • imagejpeg($image,"grille.jpg",70);
  • // Libération des ressources, on efface l'image généré de la mémoire
  • imagedestroy($image);
  • // Affichage de l'image
  • echo "<img src=\"grille.jpg\">";
  • }
  • }
  • // Appele de la fonction et affichage du résultat
  • loto('49');
  • ?>
<?
function loto($nombre)
{
	$masknum = "^[0-9]+$";
	if ($nombre <> '' && ereg($masknum,$nombre))
	{
		// on vire les images .jpg du répertoire
		// Vous noterez le joli copier/coller de l'aide php lol
		$handle=opendir('.'); // on ouvre le dossier
		while ($file = readdir($handle)) { // tant qu'il y a des fichiers
			if ($file != "." && $file != "..") // si c'est pas un dossier
			{
				if (ereg(".jpg$", $file)) // si la fin du fichier est .jpg
				{
							@unlink($file); // on vire le fichier
				}
			}
		}
		closedir($handle);
		// Ici c au cas ou le script est dans un dossier a part
		// Si vous voulez virer juste l'image de la grille faire unlink($grille.jpg");
		
		$texte = array(); // Tableau qui contiendra les lignes de numéros
		$index_array = 0; // Index du tableau pour l'affichage des lignes
		$la_ligne = ''; // Variable temporaire pour la listes des numéros a mettre dans le tableau
		$coord_map = ''; // liste des coordonnées pour le mapping
		$lien_clique = "#"; // lien pour le mapping
		
		$largeur_map = 18; // largeur d'une zone de mapping (1 numéro quoi)
		$hauteur_map = 20; // hauteur d'une zone de mapping (pareil qu'au dessus)
		
		$coord_1 = 8; // coordonnée de départ pour le mapping - COTE GAUCHE  |
		$coord_2 = $coord_1 + $largeur_map;// coordonnée de départ pour la mapping (on ajoute simplement la largeur a la coordonnée du coté gauche) - COTE DROIT  |
		$coord_3 = 9; // coordonnées de départ pour le mapping - HAUT DU MAPPING _
		$coord_4 = $coord_3 + $hauteur_map; // coordonnées de départ pour le mapping - BAS DU MAPPING _
		
		/*
		Visualisation graphique d'une zone de mapping
				3
		   ------------
		1  |		   |  2
		   ------------
				4
		*/
			
		//Génération du tableau qui contient les numéros
		for ($i=1;$i<$nombre+1;$i++) // ici on ajout 1 au nombre cherché car i commence à 1
		{
			$le_nombre = $i; // on met i en variable pour mieux le manipuler sans briser la boucle.
			
			if (strlen($le_nombre) == 1) // si la longueur de la chaine i est égale à 1 alors on ajoute un 0 devant pour faire plus beau (et accessoirement ça facilite le mapping lol)
			{
				$le_nombre = "0".$le_nombre;
			}
			
			$la_ligne .= " ".$le_nombre; // On concatène dans la variable la ligne de nombre
			
			// On concatène les divers area de mapping pour les numéros
			$coord_map .= "\n<area shape=\"rect\" coords=\"$coord_1,$coord_3,$coord_2,$coord_4\" href=\"".$lien_clique.$i."\">";
			
			// Nouvelle coordonnées pour les numéros suivants
			$coord_1 = $coord_2;
			$coord_2 = $coord_2 + $largeur_map;
			
			// j'ai décidé de coupé les lignes à chaque multiple de 10 (pour le loto ça fait plus beau)
			// Si vous décidez de modifier l'affichage c'est ici que vous devez mettre les conditions
			if (substr($i,-1,1) == '0' || $i == $nombre)
			{
				$texte[$index_array] = $la_ligne; // On ajoute dans le tableau la 1ere ligne de nombre
				$index_array++; // On implémente de 1 pour dire dans quelle ligne du tableau on ajoutera la liste des nombres au prochain passage de la boucle
				$la_ligne = ''; // la ligne a été ajouté donc on la vide
				$coord_3 = $coord_3 + $hauteur_map; // On change la ligne de reférence du mapping HAUT pour passer à la ligne suivante
				$coord_1 = 8; // Nouvelle coordonnée du mapping pour le COTE GAUCHE
				$coord_2 = $coord_1 + $largeur_map; // Nouvelle coordonnée du mapping pour le COTE DROIT (on ajoute la largeur de la zone de mapping)
				$coord_4 = $coord_3 + $hauteur_map; // Nouvelle coordonnée du mapping pour le BAS (on ajoute la hauteur de la zone de mapping)
			}
		}
		
		$coord_haut = 10; // Coordonnée du texte à écrire en fonction du haut de l'image
		
		// creation de l'image
		$image = imagecreate(200,115);
		
		// Couleur de fond de l'image
		$fond = imagecolorallocate($image,0,0,0);
		
		// couleur de la police
		$couleur = imagecolorresolve($image,255,255,255);
		
		for ($j=0;$j<count($texte);$j++) // Boucle jusqu'à la fin du tableau des nombres
		{
			imagestring($image,2,5,$coord_haut,$texte[$j],$couleur); // On écrit sur l'image la 1ere ligne de nombres (contenu dans le tableau $texte[])
			$coord_haut = $coord_haut + 20; // Nouvelle coordonnée de la ligne de nombres à écrire
			
		}
		
		// Création de l'image à afficher
		imagejpeg($image,"grille.jpg",70);
		
		// Libération des ressources, on vire l'image généré de la mémoire
		imagedestroy($image);
		
		// Affichage de l'image
		echo "<img src=\"grille.jpg\" usemap=\"#loto\">";
		
		// Affichage des coordonnées du mapping
		echo "<map name=\"loto\">";
		echo $coord_map;
		echo "\n</map>";
	}
	else
	{
		$image = imagecreate(215,35);
		
		// Couleur de fond de l'image
		$fond = imagecolorallocate($image,0,0,0);
		
		// Couleur de la police
		$couleur = imagecolorresolve($image,255,255,255);
		
		// On ajoute le message d'erreur
		$message_erreur = ":: hum Faudrai un chiffre la ;) ::";
		imagestring($image,2,5,10,$message_erreur,$couleur);
		
		// Création de l'image à afficher
		imagejpeg($image,"grille.jpg",70);
		
		// Libération des ressources, on efface l'image généré de la mémoire
		imagedestroy($image);
		
		// Affichage de l'image
		echo "<img src=\"grille.jpg\">";
	}
}

// Appele de la fonction et affichage du résultat
loto('49');
?>

 Conclusion

Pour l'inclure sur votre site et adapter l'image à votre charte, il suffit changé quelques variables, d'un peu de logique et ça devrai etre bon lol.
Pourquoi pas faire un carré autour des chiffres pour faire encore plus loto ? et coloré ce carré en rouge pour montrer les numéros tirés.

Voila bon coding :D

--------------------------
http://www.kame-hou se.org
--------------------------


 Sources du même auteur

Source avec Zip Source avec une capture TOUT SUR LES IMAGES DYNAMIQUES
EVITER LA DEFORMATION D'UN TABLEAU
Source avec Zip Source avec une capture FLASH ET PHP : ÉBAUCHE DE LIVRE D'OR POUR VOIR COMMENT ÇA MA...
EXPRESSIONS RÉGULIÈRES TOUTES PRÊTES
MMAIL() POUR FREE.FR

 Sources de la même categorie

Source avec Zip Source avec une capture CAMEMBERT BD par dardelphi
Source avec une capture AMÉLIORATION : CAMEMBERT par asphator
GESTION DE COULEUR par manuche
Source avec Zip NAVIGATOR (+CSSDETECTOR) par xXVoxPopuliXx
COMMENT, AVEC GD, DESSINER UN RECTANGLE TRANSPARENT PLEIN AV... par Rainbow

Commentaires et avis

Commentaire de jdaviaud le 11/11/2003 10:54:25

Excellent ton code !!
Il marche nickel, j'ai juste eu une erreur car le fichier .jpg du meme nom que le fichier php etait introuvable mais j'ai crée un jpg manuellement et ca marche impec.
Merci beaucoup pour cette source

Commentaire de Tomcube le 11/11/2003 12:12:46

Je vais tester tout ça,
merci geniusturtle ! ^^

Commentaire de defkrie le 15/11/2003 16:48:06

merci je vais voir c que je peux en faire et bravo!!!!
heuresement que nix ne fait pas de concours php sinon tu serai le n1

Commentaire de nihaoma le 02/02/2005 16:34:53

salut à tous,

j'ai un petit soucs et je me disais que peut etre l'un d'entre vous pourrait m'aider...
voila le truc, j'ai besoin, sur une image, de pouvoir enregistrer les coordonnées d'un clic, afin, plus tard, de pouvoir venir mettre à ces coordonnées des petites images par dessus la grande....
je sais pas si j'ai été très clair...
en fait, il sagit d'une liste de voiture, et pour chaque voitures, je veux pouvoir venir enregistrer en cliquant sur un shéma de cette voiture, des points d'impacts (un peu comme quand on remplit un constat après un accident), ensuite, quand j'affiche la dite voiture, je viens mettre des petites fléches (une image m'irrait très bien) au coordonnées enregistrer....

savez vous comment je peux faire, en Php ou meme en Javascript, pour enregistrer les coordonnées d'un clic relativement à l'image et non au navigateur (les fonctions event.x et event.y me donne les coodonnées avec pour origine le coin supérieur gauche du navigateur, mais le problème, c'est que l'image ne sera pas forcement placée a la meme place entre la phase d'enregistrement et l'affichage final avec les fleches)

c'est un peu long, désolé, mais si vous trouvez, vraiment vous me sauverez la vie...

merci par avance
cordialement
NiHaoMa

Commentaire de nihaoma le 02/02/2005 16:35:07

salut à tous,

j'ai un petit soucs et je me disais que peut etre l'un d'entre vous pourrait m'aider...
voila le truc, j'ai besoin, sur une image, de pouvoir enregistrer les coordonnées d'un clic, afin, plus tard, de pouvoir venir mettre à ces coordonnées des petites images par dessus la grande....
je sais pas si j'ai été très clair...
en fait, il sagit d'une liste de voiture, et pour chaque voitures, je veux pouvoir venir enregistrer en cliquant sur un shéma de cette voiture, des points d'impacts (un peu comme quand on remplit un constat après un accident), ensuite, quand j'affiche la dite voiture, je viens mettre des petites fléches (une image m'irrait très bien) au coordonnées enregistrer....

savez vous comment je peux faire, en Php ou meme en Javascript, pour enregistrer les coordonnées d'un clic relativement à l'image et non au navigateur (les fonctions event.x et event.y me donne les coodonnées avec pour origine le coin supérieur gauche du navigateur, mais le problème, c'est que l'image ne sera pas forcement placée a la meme place entre la phase d'enregistrement et l'affichage final avec les fleches)

c'est un peu long, désolé, mais si vous trouvez, vraiment vous me sauverez la vie...

merci par avance
cordialement
NiHaoMa

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,962 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales