<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
// Capturamos el click encima de una estrella
$("#stars li").click(function(){
if($(this).is("li:first") && $(this).hasClass("selected") && !$(this).nextAll("li").hasClass("selected"))
{
// Si es la primera estrella la selecciona, y dicha estrella
// esta marcada y es la unica marcada, quitamos la clase
$(this).removeClass("selected");
// añadimos al valor al formulario
$("input[name=stars]").val(0);
}else{
// añadimos la clase "selected"
$(this).addClass("selected");
// añadimos la clase "selected" a todas las estrellas anteriores
$(this).prevAll("li").addClass("selected");
// eliminamos la clase "selected" a todas las estrellas siguientes
$(this).nextAll("li").removeClass("selected");
// añadimos al valor al formulario
$("input[name=stars]").val($( "li" ).index($(this))+1);
}
});
});
</script>
<style>
ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
}
ul li{
background:url('stars.png') no-repeat 0px 0px transparent;
width:16px;
height:16px;
float:left;
}
ul li.selected{ /* esta clase añade la imagen seleccionada */
background:url('stars.png') no-repeat -16px 0px transparent;
}
</style>
</head>
<body>
<?php
if(isset($_POST["stars"]))
{
# Mostramos la valoración que se ha enviado mediante el formulario
echo "<p>La valoración a sido de: ".$_POST["stars"]."</p>";
}
?>
<form action="<?php echo $_SERVER["PHP_SELF"]?>" method="post">
<input type="hidden" name="stars" value="0">
<ul id="stars">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p><input type="submit" value="Enviar valoración"></p>
</form>
</body>
</html>
La imagen stars.png