.rating {  
color: #757575;  
font: 11px tahoma;  
width: 85px;  
height: 16px;  
}  
.unit-rating {  
list-style: none;  
margin: 0px;  
padding: 0px;  
width: 85px;  
height: 16px;  
position: relative;  
background: url(http://heroes-ru.info/img/rating/rating.gif) repeat-x top left;  
}  
.unit-rating li {  
text-indent: -90000px;  
padding: 0px;  
margin: 0px;  
float:left;  
} /*heroes-ru.info*/  
.unit-rating li a {  
display: block;  
width: 17px;  
height: 16px;  
text-decoration: none;  
text-indent:-9000px;  
z-index: 17;  
position: absolute;  
padding: 0px;  
}  
.unit-rating li a:hover {  
background-image: url(http://heroes-ru.info/img/rating/rating.gif);  
background-position: left center;  
z-index: 2;  
left: 0px;  
}  
.unit-rating a.r1-unit {  
left: 0px;  
}  
.unit-rating a.r1-unit:hover {  
width: 17px;  
}  
.unit-rating a.r2-unit {  
left: 17px;  
}  
.unit-rating a.r2-unit:hover {  
width: 34px;  
}  
.unit-rating a.r3-unit {  
left: 34px;  
}  
.unit-rating a.r3-unit:hover {  
width: 51px;  
}  
.unit-rating a.r4-unit {  
left: 51px;  
}  
.unit-rating a.r4-unit:hover {  
width: 68px;  
}  
.unit-rating a.r5-unit {  
left: 68px;  
}  
.unit-rating a.r5-unit:hover {  
width: 85px;  
}  
.unit-rating li.current-rating {  
background-image: url(http://heroes-ru.info/img/rating/rating.gif);  
background-position: left bottom;  
position: absolute;  
height: 16px;  
display: block;  
text-indent: -9000px;  
z-index: 1;  
}

<span id='ratig-layer' style="float: left; background: url('http://heroes-ru.info/img/rating/$RATING_NUM$.gif')"><span class="rating">  
<ul class="unit-rating">  
<li class="current-rating" id="ids$ID$" style="width:0px;">0</li>  
<li><a href="#" title="Плохо" class="r1-unit" onclick="if (confirm('Вы подтверждаете свою оценку?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-1-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">1</a></li>  
<li><a href="#" title="Приемлемо" class="r2-unit" onclick="if (confirm('Вы подтверждаете свою оценку?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-2-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">2</a></li>  
<li><a href="#" title="Средне" class="r3-unit" onclick="if (confirm('Вы подтверждаете 3?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-3-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">3</a></li>  
<li><a href="#" title="Хорошо" class="r4-unit" onclick="if (confirm('Вы подтверждаете 4?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-4-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">4</a></li>  
<li><a href="#" title="Отлично" class="r5-unit" onclick="if (confirm('Вы подтверждаете 5?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-5-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">5</a></li>  
</ul>  
</span></span>  
<script type="text/javascript">  
document.getElementById('ids$ID$').style.width=17*$RATING$+'px';  
var i = 0;  
function getaruond$ID$(x){  
if(!i){  
var q = $RATED$*$RATING$;  
var w = (q+x)/($RATED$+1);  
document.getElementById('ids$ID$').style.width=17*w+'px';  
i++;  
}}  
</script>  
<img src="http://heroes-ru.info/img/rating/$RATING_NUM$.gif" align=absmiddle valign=center border=0 alt="Рейтинг материала: $RATING$/$RATED$">