Toto řešení ukazuje, jak s pomocí CSS vytvořit typickou hodnotící škálu tvořenou pěti hvězdami. Řešení obsahuje jak vertikální, tak i horizontální hodnotící škálu. Hvězdy navíc mohou být snadno nahrazeny i jinými geometrickými tvary.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Rogie King. Bližší popis najdete v článku CSS Star Rating Part Deux.

CSS, horizontální hvězdičky

.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;
}

CSS, vertikální hvězdičky

.vert-hodnoceni-hvezdami
{
list-style:none;
margin: 0px;
padding:0px;
height: 150px;
width: 30px;
position: relative;
background: url(„vert_hv.gif“) top left repeat-y;
}
.vert-hodnoceni-hvezdami li
{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.vert-hodnoceni-hvezdami li a
{
display:block;
height:30px;
width: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.vert-hodnoceni-hvezdami li a:hover
{
background: url(„vert_hv.gif“) right top repeat-y;
z-index: 2;
top: 0px;
}
.vert-hodnoceni-hvezdami a.jedna-hvezda
{
top: 0px;
}
.vert-hodnoceni-hvezdami a.jedna-hvezda:hover
{
height:30px;
}
.vert-hodnoceni-hvezdami a.dve-hvezdy
{
top:30px;
}
.vert-hodnoceni-hvezdami a.dve-hvezdy:hover
{
height: 60px;
}
.vert-hodnoceni-hvezdami a.tri-hvezdy
{
top: 60px;
}
.vert-hodnoceni-hvezdami a.tri-hvezdy:hover
{
height: 90px;
}
.vert-hodnoceni-hvezdami a.ctyri-hvezdy
{
top: 90px;
}
.vert-hodnoceni-hvezdami a.ctyri-hvezdy:hover
{
height: 120px;
}
.vert-hodnoceni-hvezdami a.pet-hvezd
{
top: 120px;
}
.vert-hodnoceni-hvezdami a.pet-hvezd:hover
{
height: 150px;
}
.vert-hodnoceni-hvezdami li.current-rating
{
background: url(„vert_hv.gif“) center top repeat-y;
position: absolute;
width: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}

XHTML

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

4 Příspěvků v diskuzi

Odpovědět