Our percentage based Star Rating function gives you 1,680% increase in accuracy — compared with the traditional 5 star system, it has 84 hotspots (84 pixels), instead of 5 hot spots (5 stars). Let’s do the math: (84/5)*100 = 1,680%… why restrict your users?
JAVASCRIPT
/* AJAX Star Rating : v1.0.3 : 2008/05/06 */<br>/* http://www.nofunc.com/AJAX_Star_Rating/ */<br><br>function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); }<br>function $S(o) { return((typeof(o)=='object'?o:$(o)).style); }<br>function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }<br>function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); }<br>function XY(e,v) { var o=agent('msie')?{'X':event.clientX+document.documentElement.scrollLeft,'Y':event.clientY+document.documentElement.scrollTop}:{'X':e.pageX,'Y':e.pageY}; return(v?o[v]:o); }<br><br>star={};<br><br>star.mouse=function(e,o) { if(star.stop || isNaN(star.stop)) { star.stop=0;<br><br> document.onmousemove=function(e) { var n=star.num;<br> <br> var p=abPos($('star'+n)), x=XY(e), oX=x.X-p.X, oY=x.Y-p.Y; star.num=o.id.substr(4);<br><br> if(oX<1 || oX>84 || oY<0 || oY>19) { star.stop=1; star.revert(); }<br> <br> else {<br><br> $S('starCur'+n).width=oX+'px';<br> $S('starUser'+n).color='#111';<br> $('starUser'+n)[removed]=Math.round(oX/84*100)+'%';<br> }<br> };<br>} };<br><br>star.update=function(e,o) { var n=star.num, v=parseInt($('starUser'+n)[removed]);<br><br> n=o.id.substr(4); $('starCur'+n).title=v;<br><br> req=new XMLHttpRequest(); req.open('GET','?vote='+(v/100),false); req.send(null); <br /><br />};<br /><br />star.revert=function() { var n=star.num, v=parseInt($('starCur'+n).title);<br><br> $S('starCur'+n).width=Math.round(v*84/100)+'px';<br> $('starUser'+n)[removed]=(v>0?Math.round(v)+'%':'');<br> $('starUser'+n).style.color='#888';<br> <br> document.onmousemove='';<br><br>};<br><br>star.num=0;
CSS
#star ul.star { LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 10px; TOP: -5px; POSITION: relative; FLOAT: left; BACKGROUND: url('http://nofunc.org/media/stars.gif') repeat-x; CURSOR: pointer; }<br>#star li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; }<br>#star li.curr { BACKGROUND: url('http://nofunc.org/media/stars.gif') left 25px; FONT-SIZE: 1px; }<br>#star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 13px; FONT-FAMILY: Arial; COLOR: #888; }
HTML
<ul id="star" class="star" onmousedown="star.update(event,this)" onmousemove="star.mouse(event,this)" title="Rate This!"><br> <li id="starCur" class="curr" title="80" style="width: 67px;"></li><br></ul><br><div id="starUser" class="user">80%</div>
