Système de notation (rating) 2.0 en javascript (survol d'image, sans jquery !)

Télécharger le projet
Commenter

Description

formulaire permettant d'attribuer une note sans utiliser jquery, juste en javascript avec des images survolées.
On part d'une image de base (étoiles vides) qui, selon l'endroit où on la survole sera remplacée par une autre image à 1,2,3,4 ou 5 étoiles.
Un clic gauche sur les étoiles permet de lancer ou d'arrêter le survol pour fixer la note, mais celle-ci sera de toutes façons enregistrée au survol même sans cliquer.
La note peut être insérée dans une bdd via l'input hidden lors du traitement du formulaire.
Vous pouvez ajouter d'autres notes en donnant des noms différents à "Map", "note" et "avis", grâce aux fonctions javascript, ainsi qu'à l'input hidden permettant d'insérer la note dans une bdd au traitement du formulaire.

Source / Exemple : 


<script type="text/javascript">

//survol et click souris sur les étoiles des avis utilisateurs
//------------------------------------------------------------

function remplace(elem,note,x) {
	
	document.getElementById(elem).src = 'clipart/' + x + '-star.png';
	document.getElementById(note).value = x; //on attribue la note à l'input
}
function disableMap(map,elem,note,x) {
	
	document.getElementById(elem).src = 'clipart/' + x + '-star.png';
	document.getElementById(elem).useMap = '';
	document.getElementById(note).value = x;
	document.getElementById(elem).style.cursor = 'pointer';
}
function enableMap(map,elem,note) {
	
	document.getElementById(elem).useMap = map;
	document.getElementById(elem).style.cursor = 'pointer';
	document.getElementById(note).value = '';
}

</script>

<form name="rateForm" id="rateForm" action="" method="post">
    <h2>attribuer une note</h2>
    <br />
    <p><label>note de qualité :</label><img id="avis" src="clipart/0-star.png" border="0" usemap="#Map" onclick="enableMap('Map','avis','note');"/></p>
    <map name="Map" id="Map">
      <area shape="rect" coords="20,0,38,20" href="#" alt="une étoile" onmouseover="remplace('avis','note',1);" onclick="disableMap('Map','avis','note',1);"/>
      <area shape="rect" coords="38,0,56,20" href="#" alt="deux étoiles" onmouseover="remplace('avis','note',2);" onclick="disableMap('Map','avis','note',2);"/>
      <area shape="rect" coords="56,0,74,20" href="#" alt="trois étoiles" onmouseover="remplace('avis','note',3);" onclick="disableMap('Map','avis','note',3);"/>
      <area shape="rect" coords="74,0,92,20" href="#" alt="quatre étoiles" onmouseover="remplace('avis','note',4);" onclick="disableMap('Map','avis','note',4);"/>
      <area shape="rect" coords="92,0,110,20" href="#" alt="cinq étoiles" onmouseover="remplace('avis','note',5);" onclick="disableMap('Map','avis','note',5);"/>
      <area shape="rect" coords="0,0,20,20" href="#" alt="zéro étoiles" onmouseover="remplace('avis','note',0);" onclick="disableMap('Map','avis','note',0);"/>
    </map>
    <input type="hidden" id="note" name="note" value=""/>
    <br />
    <p>laisser un commentaire :</p>
    <textarea name="comments" id="comments" rows=2></textarea>
    <p><input type="submit" name="noter" class="submit" value="soumettre"/></p>
</form>

Conclusion :


Pas besoin de jquery (perso, je préfère un code limpide, étant encore peu habitué à jquery...)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_nebenobo)