Не так давно пришлось заняться реализацией возможности оставлять отзывы с выставлением оценки. Своего рода рейтинг. Расскажу как это можно сделать легко, красиво, функционально.
Что нам потребуется? Две картинки (пустая звезда и заполненная) и немного CSS. А теперь, расскажу немного о функциональности. Данный пример позволяет реализовать не только 5 бальную систему оценок, но и 7, 10, 20, и даже 100. Данный пример удобно использовать с каким нибудь динамическим языком программирования, например PHP. Для начала нам понадобится html-страничка со следующим кодом.
<html>
<head>
<title>RateThis</title>
</head>
<body>
<div class="testimonial-rating">
<div class="testimonial-rating-stars">
<div class="testimonial-realrating" style="width:85%;"></div>
</div>
<div class="testimonial-numerical-rating">4.25 / 5</div>
</div>
</body>
</html>
[/html]
Структура есть. Перейдем к стилям.
[css] .testimonial-rating {width:200px;
height:24px;
line-height: 24px;
}
.testimonial-rating-stars {
background:url("img/star_empty.png") repeat-x;
width:120px; /* Ширина звезды * желаемое число звезд */
height:24px; /* Высота звезды */
float:left;
}
.testimonial-realrating {
background:url("img/star.png") repeat-x;
height:24px; /* Высота звезды */
}
.testimonial-numerical-rating {
width:70px;
padding-left:10px;
float:right;
font-size: 14px;
text-align: left;
}
[/css]
О том как подключить css-стили Вы можете прочитать во второй лекции «CSS с нуля». Вот в принципе и все. Любезно предоставляю Вам исходники и демо.
