Image dynamique et mapping : la grille du loto

Soyez le premier à donner votre avis sur cette source.

Snippet vu 21 442 fois - Téléchargée 28 fois

Contenu du snippet

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 / Exemple :


<?
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-house.org
--------------------------

A voir également

Ajouter un commentaire

Commentaires

cs_nihaoma
Messages postés
140
Date d'inscription
jeudi 2 mai 2002
Statut
Membre
Dernière intervention
2 février 2010
-
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
cs_nihaoma
Messages postés
140
Date d'inscription
jeudi 2 mai 2002
Statut
Membre
Dernière intervention
2 février 2010
-
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
defkrie
Messages postés
435
Date d'inscription
vendredi 20 septembre 2002
Statut
Membre
Dernière intervention
20 novembre 2004
-
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
Tomcube
Messages postés
312
Date d'inscription
vendredi 4 avril 2003
Statut
Membre
Dernière intervention
14 septembre 2004
1 -
Je vais tester tout ça,
merci geniusturtle ! ^^
jdaviaud
Messages postés
151
Date d'inscription
mercredi 8 janvier 2003
Statut
Membre
Dernière intervention
8 octobre 2013
-
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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.