29 octobre 2008 à 13:41, par Christophe
Bonjour !
Je me rappelle il y a pas mal de temps que je chercher un système de note à étoiles un peu comme YouTube par exemple… Et je n’ai jamais trouvé quelque chose de convenable et simple…
Eh oui, une note à 5 étoiles, voilà l’exemple ici…
Et voilà le code :
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
| <!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>Note à étoile</title>
<script language="javascript" type="text/javascript">
var comment = new Array('Bidon !', 'Nul !', 'Bof...', 'Pas mal !', 'Génial !');
function reset_stars(){
for(i=1;i<=5;i++){
document.getElementById('star'+i).src = './images/star.png';
}
document.getElementById('comment').innerHTML = ' ';
}
function reset_comments(){
document.getElementById('comment').innerHTML = ' ';
}
function star(id){
reset_stars()
for(i=1;i<=id;i++){
document.getElementById('star'+i).src = './images/star_on.png';
document.getElementById('comment').innerHTML = comment[id-1];
}
}
function rate(id){
reset_comments();
document.getElementById('stars').style.width = '130px';
document.getElementById('stars').innerHTML = 'Merci d\'avoir noté !<br />';
alert('Ici, vous envoyez une requête AJAX qui modifie la note de la chose en question...\nVous avez noté '+id+' !');
// La note est la variable " id " transmise à cette fonction là...
}
</script>
</head>
<body>
<div id="stars" style="width:95px; height:20px;"><span onMouseOut="reset_stars();">
<img src="./images/star.png" alt="" onMouseOver="star(1);" id="star1" onClick="rate(1);" /><img src="./images/star.png" alt="" onMouseOver="star(2);" id="star2" onClick="rate(2);" /><img src="./images/star.png" alt="" onMouseOver="star(3);" id="star3" onClick="rate(3);" /><img src="./images/star.png" alt="" onMouseOver="star(4);" id="star4" onClick="rate(4);" /><img src="./images/star.png" alt="" onMouseOver="star(5);" id="star5" onClick="rate(5);" /></span>
</div>
<div id="comment"> </div>
<div id="rate"></div>
</body>
</html> |
Mais il y a 2 images :une étoile grise, et une étoile rouge lors du passage de la souris… (cliquez pour la télécharger) :
Et voilà !
Il ne vous reste plus qu’a créer une requête AJAX (il y a beaucoup beaucoup de tutos sur Internet sur ça 
) en direction d’un fichier PHP qui modifie la moyenne de l’objet en question (Dans la fonction rate() de JavaScript, à la place de mon alert() que j’ai mis pour tester… )
Posté dans Javascript | 3 Commentaires »
2 septembre 2008 à 00:45, par Christophe
Bonsoir
Juste 2 petits liens concernent les REGEX.
Les voici:
Voilà 
Posté dans Divers, Javascript, PHP | Pas de commentaires »
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 :
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é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 | 1 Commentaire »
26 juillet 2008 à 13:37, par Christophe
Salut à tous,
Il y a pas longtemps, j’ai eu envi de faire quelque chose de design et sympa en même temps, j’ai donc pensé à un calendrier, comme celui-ci :
Donc nous allons commencer par l’HTML, la base de notre calendrier:
<div class="calendrier">
<span id="day">Loading...</span>
<span id="number">00</span>
<span id="month">Loading...</span>
<span id="hours">00:00:</span><span id="seconds">00</span>
</div> |
Maintenant, le CSS, la mise en forme du calendrier, pour qu’il soit beau en fait
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
| .calendrier {
background-image:url(./images/calendrier.png);
width:120px;
height:109px;
padding-top:30px;
text-align:center;
}
.calendrier #day {
color:#000000;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
}
.calendrier #number {
color:#EE0000;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:40px;
margin-bottom:-10px;
}
.calendrier #month {
color:#000000;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
}
.calendrier #hours, #seconds {
color:#666666;
font-family:"Courier New", Courier, monospace;
font-size:12px;
} |
L’image d’arrière-plan se trouve ici.
Maintenant, vous avez la base, il ne reste plus que le Javascript
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
| function showDate() {
var jours = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
var mois = new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
function showDate() {
var date = new Date();
var jourFR = jours[date.getDay()];
var numero_jour = date.getDate();
var moisFR = mois[date.getMonth()];
var heures = date.getHours();
if(heures < 10) {
heures = "0" + heures;
}
var minutes = date.getMinutes();
if(minutes < 10) {
minutes = "0" + minutes;
}
var secondes = date.getSeconds();
if(secondes < 10) {
secondes = "0" + secondes;
}
var heures_et_minutes = heures + ":" + minutes + ":";
document.getElementById("day").innerHTML = jourFR;
document.getElementById("number").innerHTML = numero_jour;
document.getElementById("month").innerHTML = moisFR;
document.getElementById("hours").innerHTML = heures_et_minutes;
document.getElementById("seconds").innerHTML = secondes;
}
setInterval('showDate()', 1000); // Recharge la fonction toute les secondes |
Donc là, pareil que les autres articles, soit vous mettez ce code dans votre fichier JS de votre site ou vous mettez ça entre les balises
<script type="text/javascript"></script> |
Et voilà, votre calendrier est fonctionnel !
Mais ? Mais pourquoi au début on peut voir “Loading…” ??
Parce-que la fonction Javascript showDate() est chargé 1000 millisecondes (1s) après le chargement de la page, pour que cette fonction soit chargé au chargement, vous devez ajouter
à votre balise body
et Exemple ici
Bye et tenez-vous à jour !
Posté dans HTML/CSS, Javascript | Pas de commentaires »
24 juillet 2008 à 17:50, par Christophe
Maintenant, vos popups ne seront plus dans un coin ! Voilà comment les centrer…
Ajoutez cette fonction dans le fichier de fonctions de votre site ou directement dans la page HTML avec
<script type="text/javascript" language="javascript"></script> |
function popup(page, largeur, hauteur, options) {
var top = (screen.height-hauteur) / 2; // Calcul la hauteur en haut
var left = (screen.width-largeur) / 2; // Calcul la longueur à gauche
window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
} |
Ceci fait, il vous faut appeler la fonction dans le HTML sur un lien ou un bouton par exemple :
Sur un lien :
<a href="#" onClick="popup('votre_page.html', 600, 300, 'menubar=no,scrollbars=no,statusbar=no')">Cliquez ici !</a> |
Sur un bouton :
<input onClick="popup('votre_page.html', 600, 300, 'menubar=no,scrollbars=no,statusbar=no')" type="button" value="Cliquez ici !" /> |
Exemple ici
Voilà, popez-vous bien !
Posté dans Javascript | Pas de commentaires »
