Szavazás egyszerűen

Nagyon sok honlapon találkozni manapság szavazási lehetőséggel. Fórumokon például egy adott témát lehet értékelni 1-től 5-ig csillaggal. Videómegosztókon egy adott videót hasonlóan. A legtöbb helyen ezt valamilyen scripttel, általában javaScripttel oldják meg. Pedig egyszerű HTML megoldással is könnyedén kivitelezhető a dolog.

A HTML kód:

<div id="szavazas">
  <a href="" class="csillag1" title="1 csillag">1 csillag</a>
  <a href="" class="csillag2" title="2 csillag">2 csillag</a>
  <a href="" class="csillag3" title="3 csillag">3 csillag</a>
  <a href="" class="csillag4" title="4 csillag">4 csillag</a>
  <a href="" class="csillag5" title="5 csillag">5 csillag</a>
</div>

Ezen nincs mit túlmagyarázni. Egy div-ben az öt csillagot megtestesítő a elemek.

A CSS kód:

#szavazas {
  position: relative;
  width: 80px;
  height: 16px;
  background: url('csillag.gif') no-repeat 0 -16px;
}
 
#szavazas a {
  display: block;
  position: absolute;
  height: 16px;
  text-indent: -999em;
  cursor: pointer;
  overflow: hidden;
}
 
#szavazas a.csillag1 {
  width: 16px;
  z-index: 5;
}
 
#szavazas a.csillag2 {
  width: 32px;  
  z-index: 4;
}
 
#szavazas a.csillag3 {
  width: 48px;  
  z-index: 3;
}
 
#szavazas a.csillag4 {
  width: 64px;  
  z-index: 2;
}
 
#szavazas a.csillag5 {
  width: 80px;  
  z-index: 1;
}
 
#szavazas a:hover {
  background: url('csillag.gif') no-repeat 0 0;
}

A kódban használt csillag kép így néz ki:

A CSS-ben a szavazás doboz az öt csillag nagyságában jelenítődik meg. Az a elemek egyenként akkorák ahány csillagot jelenítenek meg, azaz az első 1 csillag, a második 2 csillag nagyságú, stb. A trükk csak annyi, hogy ezek az elemek abszolút pozicionáltak és egymás fölött helyezkednek el, fordított fedésben, tehát legfölül az 1-es csillag, alatta a 2-es és így tovább. A doboz a kijelöletlen csillagokat kapja háttérképnek, az a elemek pedig egérrávitelkor kapják meg a kijelölt csillagok háttérképet. Vagyis jelen esetben egy képen van a csillagok kijelölt és kijelöletlen állapota és pozicionálással megoldva mikor melyik jelenjen meg.

Természetesen ha oldalújratöltés nélkül szeretnénk megoldani magát a szavazás rögzítését, akkor mindenképpen szükségünk van valamilyen más scriptre, de magát a csillagokat és a kijelölést meg lehet csak HTML és CSS segítségével oldani.