Witam,
mam takowy problem: pewna funkcja w php wyświetla mi 5 szarych ikon. Za pomocą JS chcę, by najeżdżając na jedną z 5 szarych ikon zmieniły się one na inny kolor ikony(inny plik) w taki sposób, że tylko od pierwszej do zaznaczonej. Po naciśnięciu na zadaną, chcę by zostało to zapamiętane i po "zjechaniu" kursora z danego wiersza było to zapamiętane, a po powrotnym najechaniu by znów można było zaznaczać dowolne, ale gdy się nie naciśnie to by system dalej to pamiętał.

Poniżej część mojego kodu, który nie do końca działa - nie da się na nowo zaznaczać od zera.
Przy okazji - kod w JS jest trochę chaotycznie napisany(nie mam wprawy w JS i gdy coś nie wychodzi to nie optymalizuję), więc gdyby ktoś mógł jeszcze to zoptymalizować-będę wdzięczny

[PHP] pobierz, plaintext 
<?php
echo '<li><label>Ocena1:</label>';$this->ocen_atrybut(0,10,1,1);echo'<input type="hidden" name="10_ocenah" id="10_ocenah" value="0" /></li>';
        echo '<li><label>Ocena2:</label>';$this->ocen_atrybut(0,20,2,1);echo'<input type="hidden" name="20_ocenah" id="20_ocenah" value="0" /></li>';
?>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<?php
<li>
?>
[PHP] pobierz, plaintext 

Funkcja ocen_atrybut:

[PHP] pobierz, plaintext 
<?php
function ocen_atrybut($atrybut,$jaki,$jaki1,$opcja){
        if($atrybut==0){
            $ile=0;
        }elseif($atrybut>0&&$atrybut<20){
            $ile=1;
        }elseif($atrybut>=20&&$atrybut<40){
            $ile=2;
        }elseif($atrybut>=40&&$atrybut<60){
            $ile=3;
        }elseif($atrybut>=60&&$atrybut<80){
            $ile=4;
        }elseif($atrybut>=80){
            $ile=5;
        }
        
        for($i=0;$i<5;$i++){
            if($i<$ile){
                  echo  '<img id="'.$jaki.'_'.$i.'" src="grafika/trasy/'.$jaki.'ok.png"/>';
            }else{
                if($opcja==0){
                 echo  '<img id="'.$jaki.'_'.$i.'" src="ok_b.png"/>';
                }else{
                  echo  '<img id="'.$jaki.'_'.$i.'_ocena" src="ok_b.png" onmouseover="ocena(this.id,'.$i.','.$jaki.','.$jaki1.',0)" onmouseout="ocena(this.id,'.$i.','.$jaki.','.$jaki1.',1)" onclick="ocena_ok('.$jaki.','.$i.')"/>';
                }
            }
        }
    }
?>
[PHP] pobierz, plaintext 

i plik JS:

[HTML] pobierz, plaintext 
function ocena(id,ii,id1,id2,opcja){
    if(opcja==0){
 
        for(i=0;i<=ii;i++){
            document.getElementById(id1+'_'+i+'_ocena').src='id2+'ok.png';
        }
    }else if(opcja==1){
        for(i=0;i<=ii;i++){
            document.getElementById(id1+'_'+i+'_ocena').src='ok_b.png';
        }
    }
    
}
function ocena_ok(id1,ii){
    document.getElementById(id1+'_ocenah').value=ii+1;
    
}
[HTML] pobierz, plaintext 

Samo zaznaczanie poszczególnych "gwiazdek" da się w CSS`ie zrobić (tak że po najechaniu na trzecią gwiazdkę podświetla się także pierwsza i druga). Na necie był gdzieś kurs jak takie coś zrobić w samym CSS, teraz nie powiem Ci gdzie dokładnie, możliwe, że tutaj (aktualnie strona nie odpowiada). Potem można by to oprogramować lekko w JS`ie

Swego czasu dla własnych potrzeb napisałem skromny skrypcik realizujący to zadanie, teraz pewnie bym go przepisał i nieco "oczyścił":

Kod JS:
Przykładowy kod HTML: