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