Système de notation

47 -  
 47 -
Bonjour,

je suis actuellement en train de faire un script mêlant PHP et javascript pour faire un système de notation, mais voilà, j'ai un petit problème sur la partie javascript...

Il faut dire que le javascript n'est pas mon fort, et j'essaie de l'utiliser le moins possible, mais à un moment donner, pour certaine chose, il en faut un peu...

Je me suis basé sur plusieurs scripts trouvé sur le web que j'essaie d'adapter à ma sauce, mais le script qui influence le plus ma sauce serait celui-ci: http://www.javascriptfr.com

Il est pas trop mal, hormis que les images se modifie par le passage de la souris, et que dès que l'on a plus la souris dessus, meme si on a validé une option, les étoiles reviennent à leur image non-active... Alors j'essaie de partir sur une option de checkbox, et que les images se modifient selon si la checkbox est active ou pas, et que toutes les précédentes se change également... Mais rien n'y fait... :(

Si en partant du script précédent, vous arriveriez à m'orienter un peu, je vous en serez très reconnaissant! :)

2 réponses

47
 
Je suis toujours dessus, et cherche toujours une solution... J'en suis presque à 50%, mais je butte toujours... Actuellement j'arrive à modifier l'image lors du premier click sur la checkbox pour lui modifier les images comme actif... Mais des fois que le visiteur se trompe, je souhaiterais que l'image puisse revenir à l'origine, et là, ca bug... Je vous mets le code que j'ai actuellement:
<script>
<!-- 
NoteUrl= '../images/vote000.png';		//image par défaut
Note1Url= '../images/vote100.png';		//image d'une étoile sélectionnée
NoteBaseId= 'note';			//id de base des étoiles
NbNote= 10;			//nombre d'étoiles

LgtNoteBaseId=NoteBaseId.lastIndexOf('');

function notation() {
	for (i=1;i<NbNote+1;i++) {
		var img = document.getElementById('star'+i);
		var checkbox_note = document.getElementById('note'+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 = NoteUrl;
		
		checkbox_note.onclick = function() {Checking(this.id);};
		//checkbox_note.unchecked = function() {NoteUnchecked(this.id);};
		
		//img.onmouseover	=function() {StarOver(this.id);};
		//img.onmouseout	=function() {StarOut(this.id);};
	}
}
function Checking(Check) {
	if(Check.checked == false) {
		NoteUnchecked(Check);
		window.alert(Check+"?");
	}
	else {
		NoteChecked(Check);
		window.alert(Check+"!");
	}
}
function NoteChecked(Note) {
	NoteNb=Name2Nb(Note);
	for (i=1;i<(NoteNb*1)+1;i++) {
		document.getElementById('star'+i).src=Note1Url;
	}
}

function NoteUnchecked(Note) {
	NoteNb=Name2Nb(Note);
	for (i=1;i<(NoteNb*1)+1;i++) {
		document.getElementById('star'+i).src=NoteUrl;
	}
}

function Name2Nb(Note) {
	//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
	NoteNb=Note.slice(LgtNoteBaseId);
	return(NoteNb);
} 
-->
</script>


Les lignes dont je n'ai plus besoin du script originale ont juste été passée en commentaire, pour le moment, et j'ai rajouté une fonction, qui est censée tester si la checkbox est checked ou non... Mais que je mette la condition à true ou à false, ca part toujours sur le "else"...
0
47
 
Bon, j'ai modifié un peu les plans, n'arrivant pas avec la base que j'avais, un ami m'a montré 2-3 autres codes, dont 1 que j'ai réussi à adapter à mes besoins... ^^ Je vous mets donc le code ici si ca peut en aider d'autre...
function etoile(a,b)
{
	for(var i=1;i<=6;i++)
	{
		if(i>a)
			document.getElementById('starx_'+b+'_'+i).src="Votre_image_inactive";
		else
			document.getElementById('starx_'+b+'_'+i).src="Votre_image_active";
	}
}

function etoile2(a,b)
{
	for(var i=1;i<=6;i++)
	{
		if(i<=a)
			document.getElementById('starx_'+b+'_'+i).src="Votre_image_inactive";
		else
			document.getElementById('starx_'+b+'_'+i).src="Votre_image_active";
	}
}

function etoile3(a)
{
	window.location.href = a;
}

<img src="Votre_image_inactive" width="18px" height="18px" id="Votre_ID" name="star" onClick="javascript:etoile3('/Votre/destination/.php');" onMouseOver="javascript:etoile('Votre_ID');" />


Toutefois, si vous réutilisez ce code, faite attention, car je travaille avec une double ID, donc chaque fonction nécessite 2 variables à l'appel, malgré que j'en cite qu'une... Si vous désirez travailler avec une seule, juste 2-3 modifs sont à faire... ^^ (retirer tous les b des fonctions en fait... ^^)
0