Дробный рейтинг

Задача. Сделать для интернет-магазина Евросети средний рейтинг товара в виде звездочек с дробными значениями. Например, средний рейтинг = 3,6. Четвертая звездочка должна быть закрашена на 60%.

Очевидно, что нагенерить картинок для всех значений рейтинга невозможно. Поэтому, будем химичить в HTML и CSS.

Для начала нам потребуются две картинки: пустая звездочка и закрашенная .

Делаем дивчик высотой в одну звездочку, шириной в пять звездочек и бекграундом у него пускаем пустую звездочку. Внутрь кладем еще один дивчик такой же высоты с закрашенной звездочкой бекграундом. А вот ширину внутреннего дивчика высчитываем по формуле: rating * 100 / 5 (я сделал это XSL-ем на сервере, но можно и яваскриптом сделать). Получилось:

<div class="rating">
   <div style="width: 72%;"></div>
</div>

Для версии без стилей внутрь наших дивчиков добавим текст «Оценка: 3,6». В обычной версии со стилями этот текст скроем.

Последний штрих — добавим тайтл, чтобы можно было посмотреть точное значение рейтинга.

Итого:

<div class="rating" title="3,6">
   <div style="width: 72%;">Оценка: 3,6</div>
</div>

CSS:

div.rating {
   width: 85px;
   background: url('star-0-big.gif') repeat-x 0 0;
}
div.rating div {
   height: 17px;
   background: url('star-1-big.gif') repeat-x 0 0;
   font-size: 1px;
   text-indent: -9999px;
}

Оценка: 3,6

Элементарно просто можно адаптировать для:

• звездочек большего размера, сердечек, кружек пива и других форм;
• рейтингов по 6-ти, 10-ти или сколько угодно бальной системе.

Рейтинг этой заметки:

Оценка: 5,0

;-)