Chcel by som pridať na stránku hodnotenie, skúšam to pomocou hviezdičiek:
CSS, horizontální hvězdičky
Kód:
.hodnoceni-hvezdami
{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url("hrzt_hv.gif") top left repeat-x;
}
.hodnoceni-hvezdami li
{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.hodnoceni-hvezdami li a
{
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.hodnoceni-hvezdami li a:hover
{
background: url("hrzt_hv.gif") left center;
z-index: 2;
left: 0px;
}
.hodnoceni-hvezdami a.jedna-hvezda
{
left: 0px;
}
.hodnoceni-hvezdami a.jedna-hvezda:hover
{
width:30px;
}
.hodnoceni-hvezdami a.dve-hvezdy
{
left:30px;
}
.hodnoceni-hvezdami a.dve-hvezdy:hover
{
width: 60px;
}
.hodnoceni-hvezdami a.tri-hvezdy
{
left: 60px;
}
.hodnoceni-hvezdami a.tri-hvezdy:hover
{
width: 90px;
}
.hodnoceni-hvezdami a.ctyri-hvezdy
{
left: 90px;
}
.hodnoceni-hvezdami a.ctyri-hvezdy:hover
{
width: 120px;
}
.hodnoceni-hvezdami a.pet-hvezd
{
left: 120px;
}
.hodnoceni-hvezdami a.pet-hvezd:hover
{
width: 150px;
}
.hodnoceni-hvezdami li.current-rating
{
background: url("hrzt_hv.gif") left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
XHTML
Kód:
<html>
<body>
<ul class="hodnoceni-hvezdami">
<li class='current-rating' title='Teď 3.6/5' style='width:114px;'>3.6/5 Hvězd.</li>
<li><a href='#' title='1 hvězda z 5' class='jedna-hvezda'>1</a></li>
<li><a href='#' title='2 hvězdy z 5' class='dve-hvezdy'>2</a></li>
<li><a href='#' title='3 hvězdy z 5' class='tri-hvezdy'>3</a></li>
<li><a href='#' title='4 hvězdy z 5' class='ctyri-hvezdy'>4</a></li>
<li><a href='#' title='5 z 5 hvězd' class='pet-hvezd'>5</a></li>
</ul>
<p>vertikální hvězdičky 4/5</p>
<ul class='vert-hodnoceni-hvezdami'>
<li class='current-rating' title='Teď 4/5' style='height:120px;'>4/5 Hvězd.</li>
<li><a href='#' title='1 hvězda z 5' class='jedna-hvezda'>1</a></li>
<li><a href='#' title='2 hvězdy z 5' class='dve-hvezdy'>2</a></li>
<li><a href='#' title='3 hvězdy z 5' class='tri-hvezdy'>3</a></li>
<li><a href='#' title='4 hvězdy z 5' class='ctyri-hvezdy'>4</a></li>
<li><a href='#' title='5 z 5 hvězd' class='pet-hvezd'>5</a></li>
</ul>
</body>
</html>
ale toto je len statické chcel by som také čo ked niekto tomu dá 5 hviezdičiek tak nech to má 5 a potom ked niekto dá 1 tak nech ukazuje 3 hviezdy. Ako by to bolo možné spraviť?