Accueil > > > SYSTÈME DE NOTATION PAR ÉTOILES
SYSTÈME DE NOTATION PAR ÉTOILES
Information sur la source
Description
Ce script vous permet de mettre facilement en place un système de notation, comme celui de codes-sources. Je ne donne ici que la partie Javascript, c'est à vous d'adapter ce script à vos besoins en créant la partie côté serveur.
Source
- <html>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-
- <head>
- <script>
- <!--
- StarOutUrl= 'StarOut.gif'; //image par défaut
- StarOverUrl= 'StarOver.gif'; //image d'une étoile sélectionnée
- StarBaseId= 'Star'; //id de base des étoiles
- NbStar= 10; //nombre d'étoiles
-
- LgtStarBaseId=StarBaseId.lastIndexOf('');
-
- function NotationSystem() {
- for (i=1;i<NbStar+1;i++) {
- var img =document.getElementById('Star'+i);
-
- img.onclick =function() {alert('Vous avez donné la note de '+Name2Nb(this.id)+'.');};
- //Réaction lors du clic sur une étoile
- //Evidemment, il faudrait compléter cette fonction pour la rendre vraiment utile.
- //Par exemple, envoyer la note dans une base de donnée via un XMLHttpRequest.
-
- img.alt ='Donner la note de '+i;
- //Texte au survol
-
- img.src =StarOutUrl;
- img.onmouseover =function() {StarOver(this.id);};
- img.onmouseout =function() {StarOut(this.id);};
- }
- }
-
- function StarOver(Star) {
- StarNb=Name2Nb(Star);
- for (i=1;i<(StarNb*1)+1;i++) {
- document.getElementById('Star'+i).src=StarOverUrl;
- }
- }
-
- function StarOut(Star) {
- StarNb=Name2Nb(Star);
- for (i=1;i<(StarNb*1)+1;i++) {
- document.getElementById('Star'+i).src=StarOutUrl;
- }
- }
-
- function Name2Nb(Star) {
- //Le survol d'une étoile ne nous permet pas de connaître directement son numéro
- //Cette fonction extrait donc ce numéro à partir de l'Id
- StarNb=Star.slice(LgtStarBaseId);
- return(StarNb);
- }
- -->
- </script>
- </head>
-
- <body onload="NotationSystem();">
- <!--
- Vous pouvez mettre un nombre quelconque d'étoiles, veillez juste à mettre à jour la variable NbStar.
- Par défaut, les étoiles sont "éteintes" : si un utilisateur a désectivé JS il ne pourra pas voter mais le script ne plantera pas
- -->
- <img id="Star1" src="StarOut.gif" /><img id="Star2" src="StarOut.gif" />
- <img id="Star3" src="StarOut.gif" /><img id="Star4" src="StarOut.gif" />
- <img id="Star5" src="StarOut.gif" /><img id="Star6" src="StarOut.gif" />
- <img id="Star7" src="StarOut.gif" /><img id="Star8" src="StarOut.gif" />
- <img id="Star9" src="StarOut.gif" /><img id="Star10" src="StarOut.gif" />
- </body>
-
- </html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<script>
<!--
StarOutUrl= 'StarOut.gif'; //image par défaut
StarOverUrl= 'StarOver.gif'; //image d'une étoile sélectionnée
StarBaseId= 'Star'; //id de base des étoiles
NbStar= 10; //nombre d'étoiles
LgtStarBaseId=StarBaseId.lastIndexOf('');
function NotationSystem() {
for (i=1;i<NbStar+1;i++) {
var img =document.getElementById('Star'+i);
img.onclick =function() {alert('Vous avez donné la note de '+Name2Nb(this.id)+'.');};
//Réaction lors du clic sur une étoile
//Evidemment, il faudrait compléter cette fonction pour la rendre vraiment utile.
//Par exemple, envoyer la note dans une base de donnée via un XMLHttpRequest.
img.alt ='Donner la note de '+i;
//Texte au survol
img.src =StarOutUrl;
img.onmouseover =function() {StarOver(this.id);};
img.onmouseout =function() {StarOut(this.id);};
}
}
function StarOver(Star) {
StarNb=Name2Nb(Star);
for (i=1;i<(StarNb*1)+1;i++) {
document.getElementById('Star'+i).src=StarOverUrl;
}
}
function StarOut(Star) {
StarNb=Name2Nb(Star);
for (i=1;i<(StarNb*1)+1;i++) {
document.getElementById('Star'+i).src=StarOutUrl;
}
}
function Name2Nb(Star) {
//Le survol d'une étoile ne nous permet pas de connaître directement son numéro
//Cette fonction extrait donc ce numéro à partir de l'Id
StarNb=Star.slice(LgtStarBaseId);
return(StarNb);
}
-->
</script>
</head>
<body onload="NotationSystem();">
<!--
Vous pouvez mettre un nombre quelconque d'étoiles, veillez juste à mettre à jour la variable NbStar.
Par défaut, les étoiles sont "éteintes" : si un utilisateur a désectivé JS il ne pourra pas voter mais le script ne plantera pas
-->
<img id="Star1" src="StarOut.gif" /><img id="Star2" src="StarOut.gif" />
<img id="Star3" src="StarOut.gif" /><img id="Star4" src="StarOut.gif" />
<img id="Star5" src="StarOut.gif" /><img id="Star6" src="StarOut.gif" />
<img id="Star7" src="StarOut.gif" /><img id="Star8" src="StarOut.gif" />
<img id="Star9" src="StarOut.gif" /><img id="Star10" src="StarOut.gif" />
</body>
</html>
Conclusion
Voilà c'est très simple mais ça permettra peut-être à certains de gagner du temps. Vous pouvez mettre autant d'étoiles que vous voulez. Testé sur Firefox et sur IE.
Historique
- 24 septembre 2005 18:54:53 :
- + tient compte de la remarque de jesusonline : plus besoin de placer les évènements sur chaque image une par une.
+ ajout de commentaires.
- 24 septembre 2005 20:06:01 :
- Fermeture des balises <img>; maintenant le script ne plante plus si javascript n'est pas activé.
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
comment cacher des lignes dans un tableau..? [ par encugnet ]
bonjour,je suis stagiaire et je suis charge du developpement d'un portail internet permettant aux etudiants de consulter leurs resultats en ligne. Pou
Pb avec event Handler [ par jesusonline ]
Bonjour, j'ai un problème avec la declaration d'un de mes events. Plutot qu'un long discours, voici le code qui pose problème.
Système de notation [ par GAMERR ]
Bonjour je voulais savoir comment je pourrai faire pour faire un système de notation exemple : noter un jeux flash soit avec
Système de notation comme sur ce site? [ par Monico9385 ]
Bonjour, j'aimerai savoir comment c'est possible de faire un système de notation comme il y a sur ce site, c'est à dire au survol des 
Le script Notation par des étoiles [ par Fleuretta ]
Bonjour!J'ai télécharger le script Notation par des étoiles. Lorsque je passe la souris dessus il ne se passe rien . J'aimerais savoir
avis des visiteurs et notation [ par elektronlibre ]
Bonjour, j'ai cherché dans les scripts sans trouver ma réponse.Je ne connais pas les codes javascripts et php, mais je souhaite pouvoir donn
systeme de note [ par loubaba ]
slt tt le mondeje suis en train creer un site, dans le quel je voudrais inserer un systeme de vote (numoration de 1 a 10/10)et pour etre plus precis:
Script php permettant de donner une note à une image. [ par _Dam_ ]
Bonjour, je recherche le moyen (en PHP je suppose)de pouvoir donner une note à une image (de 0 à 5) avec une évaluation en images (genr
bloc note [ par pipouz ]
bonjour a tousje cherche une source permettant de creer un bloc note multi utilisateur (sans inscription) utilisant les cookies (ou autre) , un peu co
Envoi de données PHP d'après une variable Javascript [ par Centauriel ]
Bonjour,Je souhaite offrir aux visiteurs de mon site commercial la possibilité de laisser un avis sur un produit accompagné d'une note de 1 à 5.J'ai d
|
Derniers Blogs
[SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko [FRAMEWORK 4] LES TASKS ET LE THREAD UI[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi
Je viens de passer quelques temps au TechDay's et j'ai pu voir pas mal de session intéressante. Par contre une chose m'a un peu étonné lors de certaines de ces sessions qui abordaient les améliorations du framework .NET (donc le 4.5) : en gros, bea...
Cliquez pour lire la suite de l'article par fathi WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBEWORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson
Depuis déjà un an, je conseille vivement les utilisateurs de Workflow Foundation 3 à migrer vers la version 4. L'information qui va suivre ne devrait donc pas trop prendre au dépourvu les personnes qui m'ont suivi. Je profite de ce poste, pour faire le re...
Cliquez pour lire la suite de l'article par JeremyJeanson
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|