smileys.html

smileys.html

<style>
  #smileys {text-align: center; padding: 40px 0 20px;}
  #smileys div {width: 24px; height: 24px; display: inline-block;}
  #smileys div:hover {width: 24px; height: 24px; display: inline-block; cursor: pointer;}
  #smileys #green {background: url(https://www.getvero.com/assets/smiley_green.png) 0 -24px no-repeat;}
  #smileys #red {background: url(https://www.getvero.com/assets/smiley_red.png) 0 -24px no-repeat;}
  #smileys #green:hover {background: url(https://www.getvero.com/assets/smiley_green.png) 0 0 no-repeat;}
  #smileys #red:hover {background: url(https://www.getvero.com/assets/smiley_red.png) 0 0 no-repeat;}
</style>

<div id="smileys">
  <div id="green"></div>
  <div id="red"></div>
</div>

<script type="text/javascript">
  $('#smileys div').click(function(){
    rating = $(this).attr('id');
    _veroq.push(['track', 'Rated TradeGecko', {rating: rating}]);
  });
</script>