Image dynamique et mapping : la grille du loto

Commenter

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

S'inscrire maintenant

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.

Du même auteur (cs_Tortuegeniale)