Hodnocení hvězdičkami
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>
Mohlo by vás také zajímat
-
Nejlevnější VPS: To je nový Cloud Server Mini od ZonerCloud
4. června 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024
Nejnovější
-
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024
aqui
Říj 18, 2009 v 11:25No dobre, ale kam ze se uklada vysledek?
Petr
Lis 3, 2009 v 13:01jak zobrazit výsledné hodnocení?
Petr
Lis 4, 2009 v 12:13Poraďte prosím!!!
jurajko
Bře 17, 2010 v 20:19taq si to udelej v jave
http://www.tutorialy.com/tutorial/257/hvězdičkové-hodnocen%C3%AD