<html>
<head>
<style>
.star{
float: left;
background: transparent url('images/stars.gif') -180px 0px no-repeat;
width: 30px;
height: 30px;
}
.star_active{
float: left;
background: transparent url('images/stars.gif') 0px 0px no-repeat;
width: 30px;
height: 30px;
}
</style>
<script language="javascript">
var all_stats=6;
var actived=3;
var init=function(){
function getDiv(i){
return document.getElementById(i);
}
function set_active(){
var stat=arguments[0].id.substring(1)||actived;
for(var a=1;a<all_stats+1;a++)
getDiv('_'+a).className=(a<=stat)?'star_active':'star';
}
function restore(){
for(var a=1;a<all_stats+1;a++)
getDiv('_'+a).className=(a<=actived)?'star_active':'star';
}
function set_stat(o){
alert('Выбранный рейтинг: '+o.id.substring(1));
}
var div=document.createElement('div');
var child=null;
for(var a=1;a<all_stats+1;a++){
child=document.createElement('div');
with(child){
id='_'+a;
onmouseover=function(){set_active(this);};
onmouseout=function(){restore();};
onclick=function(){set_stat(this);};
}
div.appendChild(child);
}
document.body.appendChild(div);
restore();
}
</script>
</head>
<body onload="init()">
</body>
</html>