Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Głosowanie gwiazdkowe
Forum PHP.pl > Forum > Przedszkole
in5ane
Witam, chciałbym się dowiedzieć jak zrobić głosowanie gwiazdkowe, takie np. jak jest na [zmoderowano] przy filmikach, że gwiazdki się tak podświetlają fajnie i żeby to były linki.
Mnie się udało osiągnąć samo podświetlanie, ale nie wiem jak zrobić z tego linki typu ?vote=1.

KOD:
  1. #gw div { margin-left: 25px; width: 25px; height: 25px; background: url(img/gw1.jpg) no-repeat; float:left; }
  2. #gw div:hover { background: url(img/gw.jpg) no-repeat; }

  1. <div id="gw" style="margin: 0 0 0 350px;">
  2. <div><div><div><div><div></div></div></div></div></div>
  3. </div>


Proszę o pomoc smile.gif
Pilsener
Musisz zrobić linki (<a> + <img>) i poekseprymentować z pseudo-klasą a:hover i tłem, obawiam się jednak, że z powodu różnej interpretacji przez przeglądarki najłatwiej to będzie zrobić w JS.
Shili
Nieprawda, od sporej ilości czasu robię takie linki w samym css, tylko w ostatnim projekcie coś pokopałam (pod Operą). Dobrze napisane działa pod IE6/7 Firefoksem, Operą i Safari, na innych nie mialam okazji sprawdzać.

Na kilku stronach jest to zobrazowane właśnie w cssie.
Polega na tym, że kontener nadrzędny ma tło z gwiazdkami "nieaktywnymi", pozycjonowanie relatywne, ustalone wymiary oraz wyłączone paski przewijania. Na to nakłada się np. kontener z aktualnym wynikiem średnim pozycjonowaniem absolutnym. Na to wszystko najlepiej listę z linkami również z pozycjonowaniem absolutnym, linki po najechaniu mają tło "aktywne". Każdy link powinien mieć regułę left: długosc_od_gwiazdki_odpowiadajacej_ocenie_do_poczatku_pliku_tla, a hover na linku zwiększaną szerokość o szerokości kolejnych gwiazdek - dobrze w tym celu dodać każdemu linkowi inną klasę. Może to brzmieć dość zagmatwanie, ale bez kodu na razie jaśniej nie potrafię wytłumaczyć a nie chciałabym umieszczać wadliwego kodu.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.