Page 1 sur 1

Image dans un menu deroulant

Posté : 19 nov. 2009, 03:02
par newbie64
Bonjour,

J'ai un petit code php qui permet aux utilisateurs de choisir leurs polices. Afin d'améliorer l'intuitivité je voudrais que juste à coter du nom de la police, ont puisse voir une image png montrant un texte avec la police correpondante. Le meilleur exemple est la dernière version de paint.net (3.5) où l'on voit le nom de la police avec un exemple, c'est superbe !!!

Le code orignal est :

Code : Tout sélectionner

<label class="texte_inscription">Polices <select class="formulaire" name="police" id="police"> <?php $folder_polices="fichiers/polices"; if($dossier_polices = opendir($folder_polices)) { while (false !== ($file_polices = readdir($dossier_polices))) { if ($file_polices != "." && $file_polices != "..") { if(extFichier($file_polices)==".png") { $nomFichier_polices = $folder_polices."/".$file_polices; echo "<option value=\"".str_replace(".png","",$nomFichier_polices)."\">".str_replace("ttf.ttf.png","",$file_polices)."</option>"; } } } closedir($dossier_polices); } ?> </select> </label>
J'ai un autre code qui permet d'afficher les images png du texte en fonction de la police :
echo "<table align=\"center\" cellpadding=\"5\">";
$folder="fichiers/polices";
if($dossier = opendir($folder)) {
while (false !== ($file = readdir($dossier))) {
if ($file != "." && $file != "..") {
if(extFichier($file)==".png") {
$nomFichier = $folder."/".$file;
echo "<tr align=\"left\" valign=\"middle\" class=\"lib\"><td><img src=\"".$nomFichier."\" border=\"0\" width=\"100\" height=\"20\" alt=\"".$nomFichier."\" /></td></tr>";
}
}
}
echo "</table>";
closedir($dossier);
Bon, en php, je suis plus que débutant et je n'arrive pas combiner ces 2 bouts de code en un seul. Je suppose que la class formulaire ne le permet pas, j'ai essayé de faire un print sans succé. Faut dire aussi que j'ai beaucoup de mal avec le php avec ses " et /.
Si vous pouviez m'aider à combiner ses deux codes je vous transmettrai un bisous de ma copine qui désespére à me voir y passer tout mon temps. :priere:

Re: Image dans un menu deroulant

Posté : 20 nov. 2009, 21:21
par Aureusms
Est ce que tes noms de fichiers correspondant au nom des polices ?
Ex . : arial.png ?

Re: Image dans un menu deroulant

Posté : 20 nov. 2009, 23:04
par newbie64
Oui, pour une police j'ai 2 fichiers avec pour nom celle de la police comme par exemple : armybeansttf.ttf et armybeansttf.ttf.png

Re: Image dans un menu deroulant

Posté : 21 nov. 2009, 15:55
par Aureusms
Il faut que tu fasses une double boucle :
tu boucles sur la listes de tes polices et tu interroge ton dossier qui contient les images pour les afficher ou non et, enfin tu utilises les CSS...
Essayes cela :
<label class="texte_inscription">
	Polices
</label>
<select class="formulaire" name="police" id="police">         
<?php $folder_polices="fichiers/polices";
if($dossier_polices = opendir($folder_polices)) 
{
	while (false !== ($file_polices = readdir($dossier_polices))) 
	{
		if ($file_polices != "." && $file_polices != "..") 
		{
			if(extFichier($file_polices)==".png") 
			{
				$nomFichier_polices = $folder_polices."/".$file_polices;
				$nom_option = str_replace(".png","",$nomFichier_polices);
				$value_option = str_replace("ttf.ttf.png","",$file_polices);
 				?>
				<option value="<?php echo $nom_option; ?>" style="width:100px; height:20px; background-image:url(<?php echo $file_polices; ?>);"><?php echo $value_option; ?></option>
				<?php
			}
		}
	}
closedir($dossier_polices);
}
?>
</select>

Re: Image dans un menu deroulant

Posté : 22 nov. 2009, 17:23
par newbie64
Merci beaucoup Aureusms pour ton travail. Tu code est vraiment plus clair, c'est bien plus compréhensible pour quelqu'un comme moi qui débute. J'ai remplacé mon code par le tien qui à l'air de fonctionner (tout du moins aucune erreur n'apparait). Il ne me reste plus qu'à utiliser les css. D'ailleurs si tu a une piste, car je pensais juste faire "alt" et "href".

PS : sympas ton 1er site http://www.cabs-st.fr

Re: Image dans un menu deroulant

Posté : 22 nov. 2009, 20:55
par Aureusms
Merci pour le site, je le garde car c'est affectif... :)
Je ne comprends pas ton
D'ailleurs si tu a une piste, car je pensais juste faire "alt" et "href".
Si tu voulais faire un menu déroulant avec un lien dedans (href?) et un texte alternatif d'images (alt?), seul le dernier est possible (et utile dans ton cas)
Les CSS servent à positionner, colorer, écrire,... mais ces feuilles de styles en cascade (CSS) ont besoin d'une architecture HTML ou XML pour fonctionner. Le plus simple étant l'HTML (le plus simple quand on débute).
Va faire un tour ici pour les CSS http://www.alsacreations.com/. J'avais acheter leur bouquin (car je préfère les bouquins :D ) à l'époque où je débutais (il y a trois ans).
Un dernier conseil, si je peux me permettre, apprends bien l'HTML. Il reste l'architecture de ton site. Tu peux faire tout ce que tu veux avec CSS, PHP, Javascript, AJAX,... mais si ton HTML est mal construit : ton site sera mauvais. L'inverse n'est pas réciproque.(enfin moins réciproque). J'ai suivi cette voie :
  • 1. HTML
    2. PHP
    3. CSS
    4. JAVASCRIPT
    5. AJAX (j'en suis là pour le moment)

Re: Image dans un menu deroulant

Posté : 22 nov. 2009, 20:56
par Aureusms
Heu au fait, yavé pas des bisous normalement ? :D :D :D

Re: Image dans un menu deroulant

Posté : 22 nov. 2009, 21:18
par newbie64
Ah oui les bisous, je te passe ma copine : Image

:wink:

Merci pour le lien, je vais me pencher sur tous sa plus en détails car tu as raison. Tu m'as fait le plus dur avec le php, je vais me documenter sur le css avec l'html.