Ecco una soluzione per te, utilizzando solo un'immagine molto piccola e semplice e un elemento span generato automaticamente:
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;
}
Immagine
(fonte: ulmanen.fi )
Nota: non non hotlink per l'immagine qui sopra! Copia il file sul tuo server e usalo da 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);
});
}
Se desideri limitare le dimensioni delle stelle solo a metà o un quarto di stella, aggiungi una di queste righe prima della var sizeriga:
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>
uso
$(function() {
$('span.stars').stars();
});
Produzione
(fonte: ulmanen.fi )
dimostrazione
http://www.ulmanen.fi/stuff/stars.php
Questo probabilmente soddisferà le tue esigenze. Con questo metodo non devi calcolare tre quarti o quant'altro della larghezza delle stelle, basta dargli un galleggiante e ti darà le tue stelle.
Una piccola spiegazione su come vengono presentate le stelle potrebbe essere in ordine.
Lo script crea due elementi span a livello di blocco. Entrambi gli intervalli ottengono inizialmente una dimensione di 80px * 16px e un'immagine di sfondo stars.png. Le campate sono nidificate, in modo che la struttura delle campate assomigli a questa:
<span class="stars">
<span></span>
</span>
L'estensione esterna diventa background-positiondi 0 -16px. Ciò rende visibili le stelle grigie nella campata esterna. Poiché l'estensione esterna ha un'altezza di 16 px e repeat-x, mostrerà solo 5 stelle grigie.
La campata interna invece ha una background-positiondi 0 0cui sono visibili solo le stelle gialle.
Questo ovviamente funzionerebbe con due file immagine separati, star_yellow.png e star_gray.png. Ma poiché le stelle hanno un'altezza fissa, possiamo facilmente combinarle in un'unica immagine. Questo utilizza la tecnica dello sprite CSS .
Ora, poiché le campate sono nidificate, vengono automaticamente sovrapposte l'una sull'altra. Nel caso predefinito, quando la larghezza di entrambe le campate è 80px, le stelle gialle oscurano completamente le stelle grigie.
Ma quando regoliamo la larghezza della campata interna, la larghezza delle stelle gialle diminuisce, rivelando le stelle grigie.
Dal punto di vista dell'accessibilità, sarebbe stato più saggio lasciare il numero float all'interno dell'intervallo interno e nasconderlo text-indent: -9999px, in modo che le persone con CSS disattivato vedessero almeno il numero in virgola mobile invece delle stelle.
Si spera che avesse un senso.
Aggiornato il 22/10/2010
Ora ancora più compatto e più difficile da capire! Può anche essere ridotto a un rivestimento:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
