Sistema visualizzazione voti

[spiderman23]

Salve a tutti,

non essendo molto pratico di javascript ho cercato uno script che mi permettesse la visualizzazione dei voti in formato "stelle"....

infatti lo script importa due immagini...una gialla...e una grigia...e indica i voti con quelle gialle e le rimanenti (i voti vanno da 1 a 5) in grigio....

io però all'inizio pensavo di avere una votazione che va da uno a 10...indicando un voto con mezza stellina....2 una intera e cosi via...

adesso non riesco a modificare questo script in modo da riuscire ad adattarlo alla mia "esigenza"...

posto il codice nella speranza che qualcuno mi aiuti a "modificare il codice" per renderlo compatibile con le mie volontà:

 // faccio il preload dell'immagine utilizzata per l'effetto rollover
var staron = new Image(); staron.src = "star-on.gif";

// Definisco la funzione per la votazione che verrà lanciata
// all'evento onclick su una delle 5 stelle
function star_vota(QT)
{
  // Creo una variabile con l'output da restituire al momento del voto
  var star_output = '<span class="output">Hai votato ' + QT + ' stelle!</span>';
  // Cambio dinamicamente il contenuto del DIV contenitore con il messaggio di
  // conferma di votazione avvenuta
  window.location = "index.php?voto="+QT+"&ch=dj";
  //mando a video la votazione 
  document.getElementById('STAR_RATING').innerHTML = star_output;
}

// Definisco la funzione per "accendere" dinamicamente le stelle
// unico argomento è il numero di stelle da accendere
function star_accendi(QT)
{
  // verifico che esistano i DIV delle stelle
  // se il DIV non esiste significa che si è già votato
  if (document.getElementById('star_1'))
  {
    // Ciclo tutte e 5 i DIV contenenti le stelle
    for (i=1; i<=5; i++)
    {
      // se il div è minore o uguale del numero di stelle da accendere
      // imposto dinamicamente la classe su "on"
      if (i<=QT) document.getElementById('star_' + i).className = 'on';
      // in caso contrario spengo la stella...
      else document.getElementById('star_' + i).className = '';
    }
  }
}

// Questa è la funzione che produce l'output.
// richiede come unico argomento il numero di stelle che si vuole accendere
// di default (possiamo in questo, ad esempio, modo mostrare il voto ottenuto
// nelle precedenti votazioni)
function star(QT)
{
  // stampo il codice HTML che produce le stelle
  document.write('<div id="STAR_RATING" onmouseout="star_accendi(' + QT + ')""><ul>');
  document.write('<li id="star_1" onclick="star_vota(1)" onmouseover="star_accendi(0); star_accendi(1)" title="Vota">');
  document.write('<li id="star_2" onclick="star_vota(2)" onmouseover="star_accendi(0); star_accendi(2)" title="Vota">');
  document.write('<li id="star_3" onclick="star_vota(3)" onmouseover="star_accendi(0); star_accendi(3)" title="Vota">');
  document.write('<li id="star_4" onclick="star_vota(4)" onmouseover="star_accendi(0); star_accendi(4)" title="Vota">');
  document.write('<li id="star_5" onclick="star_vota(5)" onmouseover="star_accendi(0); star_accendi(5)" title="Vota">');
  document.write('[/list]</div>');
  // accendo le stelle definite in argomento
  star_accendi(QT);
} 

questo è il css:

 /* CSS Document */

#STAR_RATING ul
{
  margin: 0px;
  padding: 0px;
  height: 16px;
  list-style: none;
}
#STAR_RATING li
{
  width: 19px;
  height: 16px;
  display: block;
  float: left;
  background-image: url('img_votazione/star-off.gif');
  background-repeat: no-repeat;
  cursor: pointer;
}
#STAR_RATING li.on
{
  background-image: url('img_votazione/star-on.gif');
}
#STAR_RATING span.output
{
  padding: 3px;
  color: #339900;
  font-weight: bold;
} 

e con questo codice richiamo tutto nella mia pagina:

 <script type="text/javascript">star(1);</script> 

Partendo dal presupposto che dovrei crearmi una immagine con mezza stella(mezza gialla mezza grigia)...come potrei risolvere la cosa?

:master:

Grazie in anticipo a chi mi vorrà dare una mano...!

[spiderman23]

nessuno sa darmi un idea?? :master:

[spiderman23]

...mi devo rassegnare all'idea di una visualizzazione dei voti "approssimativa"?....magari qualche guida o tutorial che mi spieghi come farlo? anche utilizzando un altro script...?

:master:


spero che qualcuno si sia imbattuto nella mia stessa problematica....che passi da questo post naturalmente... e che mi aiuti....

Grazie