[CSS] nieaktywny button Opcje

[comanderv]

witam,

mam pytanie, w domyslych wzorach na <input type="button"> mam wypukly przycisk dla aktywnego przycisku i wklesly raczej plaski dla nieaktywnego gdy juz "dalej kliknac nie mozemy", moje pytanie: jak zdefiniowac styl dla nieaktywnego przycisku ?

na klasie button .inactive? khhhh...

poprostu za button mam graficzke (tez wstawiona nieumiejetnie bo jako tlo buttona o value=" " <--puste pole) i chce wiedziec kiedy skoncza mi sie opcje klikania (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

[comanderv]

Kod

/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/
function change(){
         if (f.elements['auto'].checked) this.sciezka= 'play.jpeg';
        else this.sciezka= 'pause.jpeg';
}
function PrzegladarkaZdjec(id, zdjecia)
{
    this.czas = 2;    // czas przejścia w trybie pokazu slajdów [sek]
    
    
    this.id = id;
    this.zdjecia = zdjecia;
    var timerID = null;
    
    this.wyswietl = function(nr)
    {
        clearTimeout(timerID);        
        var f = document.getElementById(this.id);
        
        if (nr < 0) nr = f.elements['zdjecia'].options.length - 1;
        else if (nr > f.elements['zdjecia'].options.length - 1) nr = 0;
        
        if (nr == 0)
        {
            f.elements['poczatek'].disabled = true;
            f.elements['wstecz'].disabled = true;
            f.elements['dalej'].disabled = false;
            f.elements['koniec'].disabled = false;
        }
        else if (nr == f.elements['zdjecia'].options.length - 1)
        {
            f.elements['poczatek'].disabled = false;
            f.elements['wstecz'].disabled = false;
            f.elements['dalej'].disabled = true;
            f.elements['koniec'].disabled = true;
        }
        else
        {
            f.elements['poczatek'].disabled = false;
            f.elements['wstecz'].disabled = false;
            f.elements['dalej'].disabled = false;
            f.elements['koniec'].disabled = false;
        }
        
        f.elements['zdjecia'].selectedIndex = nr;
        document.getElementById(this.id + '__img').src = f.elements['zdjecia'].options[nr].value;
        document.getElementById(this.id + '__opis').innerHTML = typeof this.zdjecia[nr][2] != 'undefined' ? this.zdjecia[nr][2] : '';
        if (f.elements['auto'].checked) this.przewin();
    }
    
    this.przewin = function()
    {
        clearTimeout(timerID);
        var f = document.getElementById(this.id);
        if (f.elements['auto'].checked)
        {
            if (document.getElementById(this.id + '__img').complete) timerID = setTimeout(this.id + '.wyswietl(' + (f.elements['zdjecia'].selectedIndex < f.elements['zdjecia'].options.length - 1 ? f.elements['zdjecia'].selectedIndex + 1 : 0) + ')', this.czas * 1000);
            else timerID = setTimeout(this.id + '.przewin()', 500);
        }
    }
    
    var matches = window.location.search.match(new RegExp('[\?&]' + this.id + '=(-?[0-9]+)(&|$)'));
    if (matches && typeof matches[1] != 'undefined')
    {
        var auto = matches[1].substring(0, 1) == '-' ? true : false;
        matches[1] = parseInt(matches[1]);
        var nr = Math.abs(matches[1]);
        if (nr < 0) nr = 0;
        else if (nr > zdjecia.length - 1) nr = zdjecia.length - 1;
    }
    else
    {
        var nr = 0;
        var auto = false;
    }
    
    for (var i = 0, html = ''; i < zdjecia.length; i++)
    {
        html += '<option value="' + zdjecia[i][0] + '"' + (i == nr ? ' selected="selected"' : '') + '>' + zdjecia[i][1] + '</option>';
    }

Kod

    document.write('<center><table class="przeglad" border="1px" width="500"><tr><td>' +
        '<form action="javascript:void(0)" id="' + this.id + '" class="zdjecia">' +
            
            '<div class="zdjecia_menu">' +
            
            /* POLE LISTY */
                '<select name="zdjecia" onchange="' + this.id + '.wyswietl(this.selectedIndex)">' +
                    html +
                '</select> <br>' +
                
    /* BUTTON POCZATKA */        
                '<input type="button" name="poczatek" class="button4"' + (nr == 0 ? ' disabled="disabled"' : '') + ' title="Początek" onclick="' + this.id + '.wyswietl(0)" onkeypress="' + this.id + '.wyswietl(0)" />' +
                
    /* BUTTON WSTECZ */            
                '<input type="button" class="button" name="wstecz" value="   "' + (nr == 0 ? ' disabled="disabled"' : '') + ' title="Wstecz" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" />' +
                
                    /* CHECKBOX POKAZU SLAJDOW */
                '<input type="checkbox"  name="auto"' + (auto ? ' ' : '') + ' id="' + this.id + '__auto" onclick="' + this.id + '.przewin()" onkeypress="' + this.id + '.przewin()" style="vertical-align: middle" /> <label style="position: relative; top: 0px" for="' + this.id
                + '__auto" >Pokaz</label>' +

    /* BUTTON DALEJ */            
                '<input type="button" name="dalej" class="button2"' + (nr == zdjecia.length - 1 ? ' disabled="disabled"' : '') + ' title="Dalej" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" />' +
                
    /* BUTTON NA KONIEC */        
                '<input type="button" name="koniec" class="button3"' + (nr == zdjecia.length - 1 ? ' disabled="disabled"' : '') + ' title="Koniec" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" />' +

            '</div>' + '</td></tr>' +
            
    /* ZDJECIE */
            '<tr><td height="500">' + '<img id="' + this.id + '__img" src="' + zdjecia[nr][0] + '" alt="" title="Dalej..." onclick="' + this.id + '.wyswietl(document.getElementById(\'' + this.id + '\').elements[\'zdjecia\'].selectedIndex + 1)" width="500" />' + '</td></tr><tr><td>' +
    
    /* OPIS */        
            '<div class="zdjecia_opis" id="' + this.id + '__opis" style="text-align: center; margin-right: 5px; margin-left: 5px; margin top: 2px;">' + (typeof zdjecia[nr][2] != 'undefined' ? zdjecia[nr][2]: '') + '</div>' +
        '</form>' + '</td></tr>'+ '</table></center>'
    );
    
    if (auto) this.przewin();
}

łot i cala historyja...za checkboxa chcialem wstawic buttona i podstawic grafike jako tlo w stylach ale element z podstawienie buttona nie wypalil... moze chcialoby sie komus zmodyfikowac ten kod dla wiekszej skutecznosci przejrzystosci i mniej wiecej pod to co mi by sie marzylo ? <maslane oczy>

chce ladne buttony a nie kombinowane (style="background-image: url (bla bla bla)")... hmm

piszac probowalem mam na mysli podmienialem za checkboxa buttona i zmienialem pola checked na disabled=false itd... mniej wiecej zauwazylem ze kod jest pod tego checkboxa napisany... ale pasowaloby mi sie go pozbyc (IMG:http://forum.php.pl/style_emoticons/default/haha.gif) d