Robarov rater example

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

Our previous version can be found at www.robarov.be/rate/.

Example

Hover over the image.

Code

HTML-code

<ul id="rating">
<li class="current-rating" style="width:130px;">Current rating: 65%</li>
<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

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

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

#rating li a {
display: block;
height: 30px;
width: 100%;
text-decoration:none;
}

#r1{width: 20px;z-index: 200;}
#r2{width: 40px;z-index: 190;}
#r3{width: 60px;z-index: 180;}
#r4{width: 80px;z-index: 170;}
#r5{width: 100px;z-index: 160;}
#r6{width: 120px;z-index: 150;}
#r7{width: 140px;z-index: 140;}
#r8{width: 160px;z-index: 130;}
#r9{width: 180px;z-index: 120;}
#r10{width: 200px;z-index: 110;}

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

#rating li a span{ display: none; }
#rating li a:hover span {
display: block;
text-indent: 0;
color: #fff;
font-weight: bold;
position: absolute;
top: 35px;
margin: 0;
padding: 4px;
width: 200px;
text-align:center;
}
.current-rating {
background:url(i/rate.gif) 0px -30px no-repeat;
position: absolute;
height: 30px;
display: block;
text-indent:-9999px; /* Hide the current rating text */
overflow: hidden;
z-index: 1;
}