Voici une solution pour vous, en utilisant une seule image très petite et simple et un élément span généré automatiquement:
CSS
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
Image
(source: ulmanen.fi )
Note: ne pas hotlink à l'image ci - dessus! Copiez le fichier sur votre propre serveur et utilisez-le à partir de là.
jQuery
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
Si vous souhaitez limiter les étoiles à une demi-étoile ou un quart d'étoile uniquement, ajoutez l'une de ces lignes avant la var sizeligne:
val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */
HTML
<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>
Usage
$(function() {
$('span.stars').stars();
});
Production
(source: ulmanen.fi )
Démo
http://www.ulmanen.fi/stuff/stars.php
Cela répondra probablement à vos besoins. Avec cette méthode, vous n'avez pas besoin de calculer des largeurs d'étoiles de trois quarts ou autres, donnez-lui simplement un flotteur et il vous donnera vos étoiles.
Une petite explication sur la façon dont les étoiles sont présentées pourrait être de mise.
Le script crée deux éléments d'étendue de niveau bloc. Les deux travées ont initialement une taille de 80px * 16px et une image d'arrière-plan stars.png. Les travées sont imbriquées, de sorte que la structure des travées ressemble à ceci:
<span class="stars">
<span></span>
</span>
La travée extérieure obtient un background-positionde 0 -16px. Cela rend visibles les étoiles grises de la travée extérieure. Comme la travée extérieure a une hauteur de 16px et repeat-x, elle n'affichera que 5 étoiles grises.
La durée intérieure d'autre part a background-positionde 0 0qui fait que les étoiles jaunes visibles.
Cela fonctionnerait bien sûr avec deux fichiers image séparés, star_yellow.png et star_gray.png. Mais comme les étoiles ont une hauteur fixe, nous pouvons facilement les combiner en une seule image. Cela utilise la technique du sprite CSS .
Désormais, au fur et à mesure que les travées sont imbriquées, elles sont automatiquement superposées les unes sur les autres. Dans le cas par défaut, lorsque la largeur des deux travées est de 80 pixels, les étoiles jaunes masquent complètement les étoiles grises.
Mais lorsque nous ajustons la largeur de la travée intérieure, la largeur des étoiles jaunes diminue, révélant les étoiles grises.
En ce qui concerne l'accessibilité, il aurait été plus sage de laisser le nombre flottant à l'intérieur de la plage intérieure et de le masquer avec text-indent: -9999px, de sorte que les personnes avec CSS désactivé voient au moins le nombre à virgule flottante au lieu des étoiles.
J'espère que cela a du sens.
Mis à jour le 22/10/2010
Maintenant encore plus compact et plus difficile à comprendre! Peut également être réduit à une seule doublure:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
