Разное - помогите создать рейтинг со звездочками на странице((((

Prisoner · Отправлено: **15:21, 18-02-2009** | #2

Доброго времени суток. И охота вам свое время тратить. Так не легче?

Tamaxta · Отправлено: **16:06, 18-02-2009** | #3

Легче, но все равно почему-то не получается(((((

Prisoner · Отправлено: **17:28, 18-02-2009** | #4

Вы полагаете кто-то сможет помочь при такой ("не получается((((") скудной информации? >_<
Опишите проблемы, что делали, что именно не получается.

Igor_I · Конфигурация компьютера

Цитата Tamaxta:

Легче, но все равно почему-то не получается((((( »

Значит не судьба.

Tamaxta · Отправлено: **12:58, 19-02-2009** | #6

Листинги для рейтинга я взяла на сайте 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;
}

Porecla · Отправлено: **17:55, 19-02-2009** | #7

Можно через базу данных. Т.е у тебя будет количество проголосававших и сумма баллов. Если разделить одно на другое, то получится оценка. Потом нарисуешь картинки и будешь выводить их в зависимости от того какая оценка.

выводить можно, например так:

$r=$row["сумма балов"]/$row["количество проголосовавших"];
$r=intval($r);
printf ("<p Рейтинг: <img src='%s.jpg'></p>",$r);

Т.е если у тебя после деления получится 7 то выведется картинка 7.jpg с семью звёздочками.

Igor_I · Конфигурация компьютера

Tamaxta, посмотри исходный текст примера - http://www.aether.ru/example/stars/

HTML код:

<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>

Получается что эти вещи взаимоисключающие.
И ещё

Цитата:

Избежать указания ширины похоже не удастся. Вычислить ее придется на серверной стороне, умножив количество баллов на ширину звезды — на 20 пикселей.

То есть для первой звезды будет width:20px, для второй - 40px и т.д.
Без серверной части работать не будет. То есть нужна обрботка скрипта PHP.