Skip to main content 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
      #rating {
            margin:20px 0 0 20px;
            width:110px;
            overflow:hidden;
        }

        #rating img {
            display:block;
            float:left;
        }

        #rating:hover {
            cursor:pointer;
        }

        .reset {
            display: block;
            float: right;
            margin: 1px 5px 0 0;   
        }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
      // Rating default
        rating = 0;

        // When hovered
        function ratinghover() {
            $("#rating img").hover(function() {
                $(this).attr("src", "http://i.imgur.com/qhd8j.png").prevAll().attr("src", "http://i.imgur.com/qhd8j.png");
            }, function() {
                $(this).attr("src", "http://i.imgur.com/qPbSG.png").nextAll().attr("src", "http://i.imgur.com/qPbSG.png");
            });

            $("#rating").mouseleave(function() {
                $("#rating img").attr("src", "http://i.imgur.com/qPbSG.png");
            });
        }

        // Initiate hover
        ratinghover();

        // When clicked
        function ratingclick() {
            $(this).attr("src", "http://i.imgur.com/qhd8j.png").prevAll().attr("src", "http://i.imgur.com/qhd8j.png");
            $("#rating").off().append("<a href='#' class='reset'><img src='http://i.imgur.com/AxPey.png' /></a>")
            .not(".reset img").css("cursor", "default").find("img").off();
            rating = $(this).data("rating");
            $(".reset").on("click", reset);
        }

        // Initiate click
        $("#rating img").on("click", ratingclick);

        // When resetting
        function reset() {
            rating = 0;
            $("#rating").css("cursor", "pointer").find("img").attr("src", "http://i.imgur.com/qPbSG.png")
            .on("hover", ratinghover).on("click", ratingclick);
            $(this).remove();
        }

        // When submitting
        $("#rating-form").submit(function(e) {
            e.preventDefault();
            $("#rating-val").val(rating);
            alert("You rated " + rating + " stars!");
        });
  </script>
</head>
<body>
    <form id="rating-form">
      <div id="rating">
        <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="1" />
        <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="2" />
        <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="3" />
        <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="4" />
        <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="5" />
      </div>

      <!-- Hidden field for capturing/sending value -->
      <select id="rating-val" style="display:none">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
      </select>
      <input type="submit" id="submit" value="Submit">
    </form>
</body>
</html>