<div id="rating">
<img src="http://steinyeti.st.funpic.de/rating/status.png?n=#
VISITOR&lang=
de" border="0"><br>
<ul class='star-rating' style="position: relative;">
<li class='current-rating' style="position: absolute"></li>
<li><a href="http://www.neopets.com/~#
NAME?n=#
VISITOR&r=1" title="
1 von 5 Sternen" class="one-star" style="position: absolute">1</a></li>
<li><a href="http://www.neopets.com/~#
NAME?n=#
VISITOR&r=2" title="
2 von 5 Sternen" class="two-stars" style="position: absolute">2</a></li>
<li><a href="http://www.neopets.com/~#
NAME?n=#
VISITOR&r=3" title="
3 von 5 Sternen" class="three-stars" style="position: absolute">3</a></li>
<li><a href="http://www.neopets.com/~#
NAME?n=#
VISITOR&r=4" title="
4 von 5 Sternen" class="four-stars" style="position: absolute">4</a></li>
<li><a href="http://www.neopets.com/~#
NAME?n=#
VISITOR&r=5" title="
5 von 5 Sternen" class="five-stars" style="position: absolute">5</a></li>
</ul>
<img src="http://steinyeti.st.funpic.de/rating/info.png?lang=
de">
<br>
<br>
<a href="~Sonnenblut" title="
Hier klicken um zu deinem eigenem Ratingsystem zu gelangen">-
Informationen zum Ratingsystem-</a>
</div>
<style>
#rating {
width:170px;
height:auto;
text-align: center;
font-size: 10px;
font-family: verdana;
margin:auto;
}
#rating a {
text-decoration:none;
color: #000000;
}
#rating a:hover {
text-decoration:underline;
cursor:default;
}
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 100px;
height: 20px;
overflow:hidden;
background: url('http://steinyeti.st.funpic.de/rating/stars.gif') top left no-repeat;
margin:auto;
}
.star-rating li{
padding:0px;
margin:0px;
width:20px;
height:20px;
float: left;
}
.star-rating li a{
display:block;
width:20px;
height: 20px;
line-height:20px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
padding: 0px;
overflow:hidden;
}
.star-rating li a:hover{
background: url(http://steinyeti.st.funpic.de/rating/alt_star.gif) left bottom;
z-index: 2;
left: 0px;
border:none;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:20px;
}
.star-rating a.two-stars{
left:20px;
}
.star-rating a.two-stars:hover{
width: 40px;
}
.star-rating a.three-stars{
left: 40px;
}
.star-rating a.three-stars:hover{
width: 60px;
}
.star-rating a.four-stars{
left: 60px;
}
.star-rating a.four-stars:hover{
width: 80px;
}
.star-rating a.five-stars{
left: 80px;
}
.star-rating a.five-stars:hover{
width: 100px;
}
.star-rating li.current-rating{
height: 20px;
display: block;
text-indent: -9000px;
z-index: 1;
width:50px;
}
</style>
(
)
