Листинги для рейтинга я взяла на сайте
http://www.aether.ru/blog/2006/05/15/css-star-rating
Не получается появление звезд. Звезды делаю CoralDraw формат GIF.
Дальше я что пишу в HTML и CSS.
В HTML:
<HTML>
<HEAD>
<link href="style.css" type="text/css" rel="stylesheet" >
</HEAD>
<BODY>
<dl class="star-rating">
<dt>Рейтинг: 4 из 5 звезд</dt>
<dd>
<ol>
<li><a href="#" class="star1">Ужасно</a></li>
<li><a href="#" class="star2">Плохо</a></li>
<li><a href="#" class="star3">Нормально</a></li>
<li><a href="#" class="star4">Хорошо</a></li>
<li><a href="#" class="star5">Отлично</a></li>
</ol>
</dd>
</dl>
<dl class="star-rating">
<li class="current" style="width:80px"><a href="#" class="star1">Ужасно</a></li>
<li class="current" style="width:80px"><a href="#" class="star2">плохо</a></li>
<li class="current" style="width:80px"><a href="#" class="star3">Нормально</a></li>
<li class="current" style="width:80px"><a href="#" class="star4">Хорошо</a></li>
<li class="current" style="width:80px"><a href="#" class="star5">отлично</a></li>
</dl>
</BODY>
</HTML>
В CSS :
dl.star-rating ol {
margin: 0;
padding: 0;
list-style: none;
width: 100px;
height: 20px;
position: relative;
background: url(stars.png);
}
dl.star-rating li {
float: left;
margin: 0;
padding: 0;
}
dl.star-rating li a {
display: block;
width: 20px;
height: 20px;
text-indent: -9999px;
position: absolute;
text-decoration: none;
z-index: 10;
}
dl.star-rating li a:hover {
background: url(stars.png) left center;
left: 0;
z-index: 2;
}
dl.star-rating a.star1 {
left: 0;
}
dl.star-rating a.star1:hover {
width: 20px;
}
dl.star-rating a.star2 {
left: 20px;
}
dl.star-rating a.star2:hover {
width: 40px;
}
dl.star-rating a.star3 {
left: 60;
}
dl.star-rating a.star3:hover {
width: 80px;
}
dl.star-rating a.star4 {
left: 80px;
}
dl.star-rating a.star4:hover {
width: 100px;
}
dl.star-rating li.current {
background: url(stars.png) left bottom;
height: 20px;
z-index: 1;
}
dl.star-rating ol>li a:hover {
text-indent: 110px;
}
