Hacer clic se quede marcada la estrella

manelmanel8 · #1 (**permalink**) 18/07/2014, 02:21

Buena a todos,

tengo el siguiente código y son 5 estrellas que cuando el ratón pasas por encima se pitan. Como puedo hacer que por ejemplo al hacer clic a la tercera se quede marcado como pintada?

Saludos

Código PHP:

  <html> 
    <head> 
        <title>Estrellitas</title> 
        <style> 
            .ec-stars-wrapper {              
                    font-size: 0; 
                    display: inline-block; 
            } 
            .ec-stars-wrapper a { 
                    text-decoration: none; 
                    display: inline-block; 
                    font-size: 32px; 
                    font-size: 2rem; 
                    color: #888; 
            } 
 
            .ec-stars-wrapper:hover a { 
                    color: rgb(39, 130, 228); 
            } 
 
            .ec-stars-wrapper > a:hover ~ a { 
                    color: #888; 
            }             
        </style> 
    </head> 
    <body> 
        <div class="ec-stars-wrapper"> 
                <a href="#" data-value="1" title="Votar con 1 estrellas">&#9733;</a> 
                <a href="#" data-value="2" title="Votar con 2 estrellas">&#9733;</a> 
                <a href="#" data-value="3" title="Votar con 3 estrellas">&#9733;</a> 
                <a href="#" data-value="4" title="Votar con 4 estrellas">&#9733;</a> 
                <a href="#" data-value="5" title="Votar con 5 estrellas">&#9733;</a> 
        </div> 
        <noscript>Necesitas tener habilitado javascript para poder votar</noscript> 
    </body> 
</html>

MaNuX0218 · #2 (**permalink**) 18/07/2014, 02:45

Donde tienes el código javascript?

manelmanel8 · #3 (**permalink**) 18/07/2014, 03:13

És lo que no se hacer....

MaNuX0218 · #4 (**permalink**) 18/07/2014, 03:29

Puedes usar el evento onClick, mas informacion en http://www.w3schools.com/jsref/event_onclick.asp

alpe2000 · #5 (**permalink**) 18/07/2014, 05:15

Recientemente use este, funciona muy bien
http://plugins.krajee.com/star-rating

caricatos · #6 (**permalink**) 18/07/2014, 07:48

Hola:

No termino de entender lo de usar enlaces sin intención de enlazar... el sentido semántico de las etiquetas "a" es el de enlazar o anclar... y evidentemente no es el caso.

Otra cosa... obligar a tener habilitado javascript no creo que sea buena idea... hay alternativas más accesibles

Saludos

manelmanel8 · #7 (**permalink**) 21/07/2014, 02:35

Alternativas más accesibles como que?

Estuve mirando el link alpe2000, pero ya tengo un estilo hecho...

Con onclick como podría hacer para si elijo la estrella 3 pinte todas las de abajo?

Tengo esto por ahora...

Código PHP:

          <div class="ec-stars-wrapper"> 
                <a href="#" onClick="style.color='rgb(39, 130, 228)';" data-value="1" title="Votar con 1 estrellas">&#9733;</a> 
                <a href="#" onClick="style.color='rgb(39, 130, 228)';" data-value="2" title="Votar con 2 estrellas">&#9733;</a> 
                <a href="#" onClick="style.color='rgb(39, 130, 228)';" data-value="3" title="Votar con 3 estrellas">&#9733;</a> 
                <a href="#" onClick="style.color='rgb(39, 130, 228)';" data-value="4" title="Votar con 4 estrellas">&#9733;</a> 
                <a href="#" onClick="style.color='rgb(39, 130, 228)';" data-value="5" title="Votar con 5 estrellas">&#9733;</a> 
        </div>

Saludos

caricatos · #8 (**permalink**) 21/07/2014, 03:30

Hola:

Cita:

Iniciado por manelmanel8

Alternativas más accesibles como que?
...

El sistema de valoraciones de mi página podría ser un ejemplo: Ajax accesible.

Lo de la accesibilidad es tener a la vez otro control (en este caso un select, y un botón de envío (ya que supongo que querrás registrar la valoración).

Saludos