SYSTÈME DE NOTATION PAR ÉTOILES
jesusonline
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Membre
Dernière intervention
13 octobre 2010
-
24 sept. 2005 à 17:33
gradegro Messages postés 1 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 24 février 2010 - 24 févr. 2010 à 18:31
gradegro Messages postés 1 Date d'inscription mardi 10 mars 2009 Statut Membre Dernière intervention 24 février 2010 - 24 févr. 2010 à 18:31
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/33933-systeme-de-notation-par-etoiles
https://codes-sources.commentcamarche.net/source/33933-systeme-de-notation-par-etoiles
24 févr. 2010 à 18:31
Merci également à Xenul, je me suis servi de sa source pour mon site.
20 févr. 2010 à 12:44
8 avril 2009 à 20:27
dabord merci a toi Scraat c bien sympa ca aide, mais petite question j'ai esseyé d'inclure ce code dans un tableau ce qui donne <td onload="NotationSystem();"> etc...
mais ca marche pas Une solution?
9 févr. 2009 à 13:41
J'ai lu tous vos script et je les ai essayés, car je voudrais en placer un sur mon site.
Je suis novice, et je souhaiterais savoir si on peut inclure une notification ou alerte email afin de connaitre directement le résultat du vote ? Merci, si quelqu'un pourrait m'aider ?
3 janv. 2009 à 16:47
C'est bon, j'ai trouvé :D
J'ai créé un formulaire, et modifié les valeurs des champs lors du img.onclick.
Demo & source ici : http://isen-airsoft.naedev.org/Perso/Notation_Etoile/
3 janv. 2009 à 10:54
J'ai modifié ton script, et pris en compte la remarque et l'astuce de Liberty74 afin de l'adapter à un nombre fini de vote sur une même page.
Ici, j'ai pris 2 votes (l'image de l'étoile est la même que sur ce site : /g/et.gif)
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<script>
<!--
StarBaseId = new Array('S1_', 'S2_'); //id de base des étoiles
NbStar = 10; //nombre d'étoiles
Check = new Array(0, 0);
LgtStarBaseId = new Array();
for (i =0; i < StarBaseId.length; i++)
{
LgtStarBaseId[i] = StarBaseId[i].lastIndexOf('');
}
function NotationSystem() {
for (j = 0; j < StarBaseId.length; j++)
{
for (i=1; i < NbStar+1; i++)
{
var img = document.getElementById(StarBaseId[j]+i);
img.alt = j;
img.onclick = function()
{
if (Check[this.alt] == 0)
{
SetOpacity(this.id, this.alt, 1);
Check[this.alt] = 1;
alert('Vous avez donné la note de '+Name2Nb(this.id, this.alt)+'.');
}
};
img.title = 'Donner la note de '+i; //Texte au survol
img.onmouseover = function()
{
if (Check[this.alt] == 0)
{
SetOpacity(this.id, this.alt, 1);
}
};
img.onmouseout = function()
{
if (Check[this.alt] == 0)
{
SetOpacity(this.id, this.alt, 0.3);
}
};
}
}
}
function SetOpacity(Star, key, opacity)
{
StarNb=Name2Nb(Star, key);
for (var i = 1; i <= StarNb; i++)
{
document.getElementById(StarBaseId[key]+i).style.opacity = opacity;
}
}
function Name2Nb(Star, key) {
//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[key]);
return(StarNb);
}
-->
</script>
</head>
<?php
for ($i=1; $i <= 10; $i++)
{
echo '';
}
echo "
";
for ($i=1; $i <= 10; $i++)
{
echo '';
}
?>
</html>
Par contre, j'arrive pas à faire un truc : lors d'un click pour fixer un vote, je souhaiterai faire document.write afin de mettre un input type hidden avec la valeur du vote. Le problème c'est qu'il ne garde pas les données de la page courante, et m'écrit l'input dans une nouvelle page :/
12 déc. 2008 à 13:09
12 déc. 2008 à 11:54
28 oct. 2008 à 14:22
28 oct. 2008 à 14:04
28 oct. 2008 à 14:04
8 févr. 2008 à 21:01
8 févr. 2008 à 18:49
12 déc. 2007 à 15:41
Je me demandais pour envoyer les données dans la base de données (type sql server express)?
Avec la technologie .net (C#). Si quelqu'un a des pistes.
J'ai essayé avec un control DropDownList, qui ne prends pas que les valeurs textes.
[ débutante ^^ ]
9 déc. 2007 à 16:39
8 juil. 2007 à 19:51
8 juil. 2007 à 17:51
9 mai 2007 à 09:31
Si ca peut t'aider....
8 mai 2007 à 12:19
Merci de tes conseilles et bonne continuation
3 mai 2007 à 14:03
img.onclick =function() {
StarOver(this.id);
clicked=1;
//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() {
if (clicked==0){
StarOver(this.id);}
};
img.onmouseout =function() {
if (clicked==0){
StarOut(this.id);}
};
Voila, en fait je n'avais pas mis le if au bon endroit :s
3 mai 2007 à 13:20
Ce système marche très bien, maintenant je voudrais insérer ca dans un formulaire et faire que quand on clique les étoiles restent séléctionnées comme on l'as fais.
J'ai bien essayé des choses comme
img.onclick=StarOver(this.id)
mais le img.onmouseout a le dessus.
J'ai même tenter de mettre un if autour de onmouseout avec une variable qui passe a false quand on clique mais ca ne marche pas non plus.
Quelqu'un peux t'il m'aider?
Merci d'avance.
16 févr. 2007 à 13:36
je viens apporter ma contribution car je me suis cassé les dents pendants 2 heures. Etrangement le systeme de notation sous ie ne fonctionnait pas chez moi avec mon systeme de template. En effet ie ne prenait pas en compte le au chargement de la page terminé, alors que les autres navigateurs interragissait très bien.
Préférez donc un bon bien frais avec un
window.onload = function NotationSystem() {...} dans le js
Merci pour la source. A+
15 déc. 2006 à 19:42
Merci.
10/10
7 janv. 2006 à 11:38
Normalement le script ne nécessite aucune modification avant d'être fonctionnel.
Une question toute bête : javascript est-il bien activé chez toi ?
Pour vérifier : http://www.volunteer.ca/volcan/javahelp/index-frn.htm
Tu vois bien "JavaScript est présentement en fonctionnement sur votre logiciel de navigation" ?
Sinon suis les instruction qui suivent.
Si ce n'est pas ça je ne vois vraiment pas, quelles sont les versions de tes navigateurs ?
Tu peux le voir dans le menu ? -> A propos de...
7 janv. 2006 à 01:15
Je t'avoue que j'espérais que tu passes par ici!
Je suis sous IE mais cela ne fonctionne pas plus sous FF.
As-tu ajouté des choses à quelque part?
Quelqu'un à qui j'ai demandé son avis hier(mais il ne connaissait pas le script) m'a fait ajouter cela
et naturellement le bon chemin pour l'image. Ce que j'ai fait plus haut aussi
Au survol de la souris il n'y a aucun changement. Et pour le reste il ne se passe pas grand chose. J'entends le click mais c'est tout.
Merci
7 janv. 2006 à 00:29
Je viens de telecharger le zip, j'ai lancé le fichier html qui etait dedans tout fonctionne parfaitement, tu es sous quel navigateur ?
6 janv. 2006 à 23:51
J'ai téléchargé ce script et il ne se passe pas grand chose. Au passage de la souris il n'y a rien qui change. L'étoile ne s'allume pas du tout. Je suis débutante et pour nous les débutants on se sait pas quoi faire, quoi ajouter aux bons endroits pour que cela fonctionne. Il serait bien de mentionner ce qui doit être fait ou ajouté. J'ai posté sur le forum en espérant une réponse tout comme ici car j'aimerais bien que cela fonctionne!
Merci
27 sept. 2005 à 19:11
Désole il vous faut javascript pour pouvoir noter
puis tu vides $('note') et tu rajoutes 10 images avec les functions onmouseover & co ;)
27 sept. 2005 à 19:06
Je vais m'occuper de ça !
Pour le xhtml : je vais rajouter des "alt", au moins. Après, ça redeviendra un peu "lourd" si je mets aussi les title.
27 sept. 2005 à 19:03
27 sept. 2005 à 18:54
sinon pour l'agrandissement en CSS non rien de compliqué suffit de modifier les propriété width et height sur l'image :)
27 sept. 2005 à 18:50
alt doit être présent ainsi que title sur les images...
27 sept. 2005 à 18:48
Sinon pour l'effet de grossissement en css, ce serait possible, mais je suis pas d'accord, css sert à la présentation et non au dynamisme. la c'est un cas entre les 2 mais je ferais ca par javascript.
27 sept. 2005 à 18:43
Pour l'effet de grossissement ton idée est intéressante, je vais y réfléchir !
Aussi, je pourrai utiliser l'effet de transparence en plus du rollover (du genre plus le nb d'étoiles augmente, plus elles sont visibles).
Sinon je connais mal le xhtml, ai-je vraiment de balises "alt" si je les attributs dès le chargement (l.23) ?
27 sept. 2005 à 18:31
ce script pourrait être amélioré en faisant un éspèce de grossicement comme sur le menu MACOS, la, ça serait vraiment super!
à part ça, en xhtml, il faut obligatoirement les alt pour les images...
24 sept. 2005 à 22:37
24 sept. 2005 à 22:12
24 sept. 2005 à 20:10
Bon il faudrait idéalement utiliser ta méthode pour "allumer" les bonnes étoiles mais je pense que je vais laisser ça comme ça pour l'instant, je vais d'abord mieux me renseigner sur les "nodes".
Merci de ton aide.
24 sept. 2005 à 19:11
Mais la si les utilisateurs n'ont pas javascript, ils vont se retrouver avec 10images sans images :s donc autant enlever completement les images et faire comme moi mettre un div ou tu rempliras les images.
Aprés pour "allumer" les images, en pseudo code je ferrais
img.onclick = function()
{
var parent = this.parent; // permet d'aller au noeud parent (dans mon cas le div d'id note)
var node = parent.firsChild();
while (node == null) // on parcours tout les noeuds enfant
{
if (node.nodeType == 1) // on verifie que c'est bien un noeud tag
if (node.tagName == 'img') // que c'est bien un noeud img (normalement c'est inutile mais j'aime bien le code trop bien fait et stupide :p)
setOpacity(node, 40); // on change le paramètre alpha.
node = node.nextSibling;
}
}
En gros ca donnerait je pense à peu prés ca :)
Au pire regarde dans le js de ce site (je sais c'est "un peu" le bordel :p)
24 sept. 2005 à 19:00
C'est mieux comme ça ? Comment tu ferais pour "allumer" toutes les étoiles inférieurs sans passer par une fonction Name2Nb comme j'ai fait ?
24 sept. 2005 à 17:36
Je sais plus comment j'ai fait pour le systeme de notation par étoile sur ce site, mais si je me souviens bien, j'ai juste un
ensuite
function SetOpacity(elmt, opacity)
{
if(elmt.style.filter)
{
elmt.style.filter = "alpha(opacity=" + opacity + ");"
}
else
{
elmt.style.setProperty("-moz-opacity", opacity/100, "");
elmt.style.setProperty("-khtml-opacity", opacity/100, "");
elmt.style.setProperty("opacity", opacity/100, "");
}
}
var makeNote = function()
{
var elmt = document.getElementByID('note');
var imgsrc = 'etoile.gif';
for (i = 0; i < 10; i++)
{
var img = new Image();
img.src = imgsrc;
img.alt = 'donner la note de ' + i + '/10';
var _i = i; //pointeur mémoire
elmt.appendChild(img);
img.onclick = setNote(_i)
img.onmouseover = function(){
// pour faire comme le systeme de notation de CS, il faudrais rechercher les images 'inférieurs' un petit peu de code pas trés compliqué est donc necessaire ici :)
SetOpacity(this, 100)};
img.onmousout = function(){
//idem
SetOpacity(this, 40)};
setOpacity(this, 40);
}
}
var setNote = function(note){alert(note)}
window.onload = makeNote;
Je suis pas sur à 100% de mon code, mais il est inutile d'ecrire tes evenements sur toutes les balises img !!! une boucle for peut trés bien faire tout ca :)