Blog of ChristoPHPe !
Bienvenue sur mon Blog !

Blog of ChristoPHPe !

[JavaScript] Note à étoiles comme dans YouTube

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 :

Voir le Code 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
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 &agrave; &eacute;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 = '&nbsp;';
}
function reset_comments(){
	document.getElementById('comment').innerHTML = '&nbsp;';
}
 
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">&nbsp;</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 pour “[JavaScript] Note à étoiles comme dans YouTube”


  1. excellent tutovet très utilse, il existe aussie des plug in jquery qu’il le font…


  2. Parfait, exactement ce que je cherchais.
    Merci à toi.

  3. #3 - Le 6 août 2009 à 1:51, par Mike

    Merci,

    Le tuto le plus clair que j’ai trouvé.
    Il ne me reste plus qu’a ajouter ma requête Ajax qui appèlera une page PHP qui à son tour mettra à jour la bonne table (MySQL).

    Mike

Laisser un commentaire

Nom

Adresse e-Mail

Site Web

 | 



-->