[JS] dynamiczne ocenianie Opcje

[gulgul]

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 

Ten post edytował gulgul 13.07.2009, 10:40:10

[#luq]

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

[slightyboy]

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:

Kod

//
// @param: (int)  ocena (liczba gwiazdek, która ma zostać podświetlona)
// @param: (obj) uchwyt obiektu (this)
//
function starRate(v,t){
    var imgDir = 'sciezka_do_plikow_z_obrazami';
    var maxRate = 5; // Maksymalna ocena (ilość wszystkich gwiazdek)

    for(var i = 1; i <= maxRate; ++i){
        document.getElementById('star-'+i).src = imgDir + 'nazwa_pliku_z_nieaktywna_gwiazdka.gif';
    }

    if(v > 0 && v <= maxRate){
        for(var i = 1; i <= v; ++i){
            document.getElementById('star-'+i).src = imgDir + 'nazwa_pliku_z_aktywna_(podswietlona)_gwiazdka.gif';
        }

    }

    t.onmouseout = function(){
        starRate(0, this);
    }

}

Przykładowy kod HTML:

Kod

<!--
Przykład zastosowania
-->
<img src="#" id="star-1" onMouseOver="starRate(1, this)" />
<img src="#" id="star-2" onMouseOver="starRate(2, this)" />
<img src="#" id="star-3" onMouseOver="starRate(3, this)" />
<img src="#" id="star-4" onMouseOver="starRate(4, this)" />
<img src="#" id="star-5" onMouseOver="starRate(5, this)" />