Système de notation par étoiles survolées avec jquery

Télécharger le projet
Commenter

Description

Plusieurs scripts équivalents sont disponibles mais je les trouvais un peu lourds en terme de code et l'utilisation de jquery simplifie grandement les choses selon moi.

Fonctionnement :

- Quand l'utilisateur survole une étoile, elle-même et les étoiles de notation inférieures changent d'apparence. Parallélement la notation est transmise au formulaire (sans avoir besoin de cliquer, pour les fénéants comme moi !).
- Quand l'utilisateur survole la croix, les étoiles reprennent l'apparence "non-survolée". Parallélement la notation est mise à 0 dans le formulaire (toujours sans clic fatiguant).
Cette dernière "astuce" m'a permis d'éviter de traiter le survol "out". Et simplifie grandement l'integration.

Integration :

- Installez la bibliothèque jquery dans votre dossier js/ (télécharger à cette adresse http://code.jquery.com/jquery-1.4.2.min.js )
- Copiez le contenu html dans votre page html, php, asp ou autre
- Copiez le contenu javascript dans votre page .js
- Copiez les images dans un dossier design/

Source / Exemple : 


/////////////////////
 /* HTML index.html */
/////////////////////
<html>
<head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/fonctions.js"></script>
</head>
<body style="background:#333;color:#FFF;">
<form action="#" method="post">
  Votre note<br/>
  <input type="hidden" name="note" value="" id="note"/>
  <img src="design/star_clear.gif" id="clear_stars" title="Sans intérêt c'est trop nul">
  <img src="design/star_out.gif" id="star_1" class="star"/>
  <img src="design/star_out.gif" id="star_2" class="star"/>
  <img src="design/star_out.gif" id="star_3" class="star"/>
  <img src="design/star_out.gif" id="star_4" class="star"/>
  <img src="design/star_out.gif" id="star_5" class="star"/>
  <!-- Ajouter autant d'étoile que nécessaire !-->
  <input type="submit" value="Noter" class="bouton"/>
</form>
</body>
</html>

  /////////////////////////////
 /* Javascript fonctions.js */
/////////////////////////////

$(document).ready(function(){

  ///////////
  // Notation
  ///////////
  var srcIn='design/star_in.gif'; //image au survol
  var srcOut='design/star_out.gif'; // image non survolée

  // Obtenir id numérique des étoiles au format star_numero
  function idNum(id)
  {
    var id=id.split('_');
    var id=id[1];
    return id;
  }

  // Survol des étoiles
  $('.star').hover(function(){
    var id=idNum($(this).attr('id')); // id numérique de l'étoile survolée
    var nbStars=$('.star').length; // Nombre d'étoiles de la classe .star
    var i; // Variable d'incrémentation
    for (i=1;i<=nbStars;i++)
    {
      if(i<=id) $('#star_'+i).attr({src:srcIn});	
      else if(i>id) $('#star_'+i).attr({src:srcOut});
      if(i==id)$('#note').attr({value:i}); // affectation de la note au formulaire
    }
  },function(){});

  // Survol de la croix
  $('#clear_stars').hover(function(){
    $('.star').attr({src:srcOut});
    $('#note').attr({value:'0'});
  },function(){});
});

Conclusion :


A vous de gérer les données envoyées par le formulaire à votre guise.
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.