Blog of ChristoPHPe !
Bienvenue sur mon Blog !

Blog of ChristoPHPe !

[PHP & JavaScript] Liste de pays avec un drapeau qui change

7 août 2008 à 20:13, par Christophe

Bonsoir !

Je vais vous montrer quelque chose d’assez sympa qui fait que quand vous sélectionnez un pays via un SELECT le petit drapeau de ce pays s’affiche sur le côté…

Tout d’abord, téléchargez ce fichier, et chargez-le par MySQL…

Après, passons au code de la page avec du HTML, du PHP :

Voir le Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?php
mysql_connect('localhost', 'nom_utilisateur', 'mot_de_passe');
mysql_select_db('base_de_donnees');
$requete = mysql_query('SELECT * FROM pays ORDER BY pays ASC') or die('Erreur SQL: ' . mysql_error());
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liste des Pays</title>
<script language="javascript" type="text/javascript">
function showFlag(init){
	document.getElementById('flag').innerHTML = '<img src="./flags/'+init+'.png" alt="'+init+'" />';
}
</script>
<style type="text/css">
#flag {
	width:18px;
	height:12px;
	margin-left:8px;
}
 
select#pays option {
	background-repeat:no-repeat;
	padding-left:23px;
}
</style>
</head>
 
<body>
<select name="pays" onChange="showFlag(this.value);" id="pays">
<option selected="selected" disabled="disabled" value="--">S&eacute;lectionnez un pays</option>
<?php
while( $donnees = mysql_fetch_array($requete) ){
 
	$initiale = $donnees['ini'];
	$pays = utf8_encode(htmlentities($donnees['pays']));
	// Pour le background-image, c'est pour afficher directment le drapeau dans le SELECT, mais cela marche seulement avec FireFox... rien ne vous empêche de la lever si vous préférez...
	echo '<option value="'.$initiale.'" style="background-image:url(./flags/'.$initiale.'.png);">'.$pays.'</option>'."\n";
}
?>
</select><span id="flag"></span>
</body>
</html>

Voilà, ça, c’est fait, il nous reste plus que les drapeaux qui sont trouvables ici.
Téléchargez-le puis décompressez ça directement à la racine de votre site.

Et voilà, le résultat ici

Bonne soirée !

Posté dans Javascript, PHP |

Un Commentaire pour “[PHP & JavaScript] Liste de pays avec un drapeau qui change”

  1. #1 - Le 9 janvier 2009 à 12:16, par Lauriane

    Je te remercie sincèrement pour ce script très sympa, qui paraît peu utile mais qui égaye facilement un site ! Bonne année :)

Laisser un commentaire

Nom

Adresse e-Mail

Site Web

 | 



-->