Robarov rater example

This is our rate example with just 1 image, based on the example at Komodo Media.
Feel free to use for any purpose. A link to our website would be nice.

We have an another version, with a current rating at www.robarov.be/rate2/.

Example

Hover over the image.

Code

HTML-code

<ul id="rating">
<li id="r1"><a href="#1" title="give this site a 1"><span>Abysmal</span></a></li>
<li id="r2"><a href="#2" title="give this site a 2"><span>Terrible</span></a></li>
<li id="r3"><a href="#3" title="give this site a 3"><span>Bad</span></a></li>
<li id="r4"><a href="#4" title="give this site a 4"><span>Poor</span></a></li>
<li id="r5"><a href="#5" title="give this site a 5"><span>Mediocre</span></a></li>
<li id="r6"><a href="#6" title="give this site a 6"><span>Fair</span></a></li>
<li id="r7"><a href="#7" title="give this site a 7"><span>Good</span></a></li>
<li id="r8"><a href="#8" title="give this site a 8"><span>Great</span></a></li>
<li id="r9"><a href="#9" title="give this site a 9"><span>Suberb</span></a></li>
<li id="r10"><a href="#10" title="give this site a 10"><span>Perfect</span></a></li>
</ul>

CSS

ul#rating {
width: 170px;
height: 50px;
list-style: none;
position: relative;
overflow:visible;
background:url(i/rate.gif) 0px 0px no-repeat;
}

ul#rating li {
position: absolute;
display: block;
height: 50px;
line-height: 12px;
font-size: 115%;
font-weight:bold;
}

ul#rating li a {
display: block;
height: 50px;
width: 100%;
text-decoration:none;
padding: 0;
}

ul#rating li#r1{ width: 17px;z-index: 200;}
ul#rating li#r2{ width: 34px;z-index: 190;}
ul#rating li#r3 { width: 51px;z-index: 180;}
ul#rating li#r4 { width: 68px;z-index: 170;}
ul#rating li#r5 { width: 85px;z-index: 160;}
ul#rating li#r6 { width: 102px;z-index: 150;}
ul#rating li#r7 { width: 119px;z-index: 140;}
ul#rating li#r8 { width: 136px;z-index: 130;}
ul#rating li#r9 { width: 153px;z-index: 120;}
ul#rating li#r10 { width: 170px;z-index: 110;}

ul#rating li a:hover{background:url(i/rate.gif) 0px -50px;}

ul#rating li a span{ display: none; }

ul#rating li a:hover span{
display: block;
text-indent: 0;
color: #000;
font-weight: bold;
position: absolute;
top: 55px;
margin: 0;
padding: 4px;
width: 170px;
text-align:center;
}