console
<style>
*{margin:0;padding:0;}
#pingfen{ width:135px;margin:10px auto;height:28px;}
#pingfen li{ width:27px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat 0 0; list-style:none;}
#pingfen ul .active{background:url(star.gif) no-repeat 0 -29px;}
</style>
<title>评分星星</title>
<script type="text/javascript">
var aData=['很差','较差','一般','推荐','力荐']
window.onload=function(){
var oPf=document.getElementById('pingfen');
var aLi=oPf.getElementsByTagName('li');
var aP=document.getElementsByTagName('p')[0];
var i=0;
for(i=0;i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].onmouseover=function()
{
aP.style.display="block";
aP.innerHTML=aData[this.index];
for(i=0;i<aLi.length;i++){
if(i<=this.index)
{
aLi[i].className="active";
}
else
{
aLi[i].className="";
}
}
};
aLi[i].onmouseout=function()
{
aP.style.display="none";
};
aLi[i].onmousedown=function ()
{
alert('提交成功:'+(this.index+1)+'分');
};
}
};
</script>
</head>
<body>
<div id="pingfen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>一般</p>
</div>
</body>