ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Hodnocení hvězdičkami

5. července 2005
•
Miroslav Kučera

Obsah

  1. CSS, horizontální hvězdičky
  2. CSS, vertikální hvězdičky
  3. XHTML

Související

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>

Předchozí článek affetto.cz
Další článek bestoldgames.net
Štítky: Články, Pro CSS: triky a finty
Miroslav Kučera

Mohlo by vás také zajímat

Nejnovější

4 komentářů

  1. aqui

    Říj 18, 2009 v 11:25

    No dobre, ale kam ze se uklada vysledek?

    Odpovědět

  2. Petr

    Lis 3, 2009 v 13:01

    jak zobrazit výsledné hodnocení?

    Odpovědět

  3. Petr

    Lis 4, 2009 v 12:13

    Poraďte prosím!!!

    Odpovědět

  4. jurajko

    Bře 17, 2010 v 20:19

    taq si to udelej v jave
    http://www.tutorialy.com/tutorial/257/hvězdičkové-hodnocen%C3%AD

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *