logo elektroda
logo elektroda
X
logo elektroda
REKLAMA
REKLAMA
Adblock/uBlockOrigin/AdGuard mogą powodować znikanie niektórych postów z powodu nowej reguły.

[HTML/CSS] - Obrazek jako przycisk typu "radio"

Uzytkownik_1994 02 Kwi 2014 14:42 3381 4
REKLAMA
  • #1 13468399
    Uzytkownik_1994
    Poziom 9  
    Posty: 13
    Dzień Dobry,

    Piszę, ponieważ tworzę stronę i stoję teraz w martwym punkcie, ponieważ
    przy tworzeniu formularza, w którym należy wypełnić pola chciałbym utworzyć przycisk, który będzie obrazkiem, coś w stylu prostego :
    <input type="radio"

    Z tym, że chciałbym sam stworzyć obrazek, który będzie przyciskiem. A nie mieć kółko, które zaznaczam.

    Przykładowo :
    Mam obrazek kwiatka, który jest szary, oraz drugi obrazek słońca, który też jest szary. Po kliknięciu na jeden z tych obrazków, obrazek zmienia się na kolorowy. Przy czym oba obrazki nie mogą być kolorowe (zaznaczone).
    Czy mógłby ktoś kto zna się na htmlu i css'ie podrzucić mniej więcej gotowy skrypt? Bardzo byłbym wdzięczny.

    Z góry dziękuje za pomoc!
  • REKLAMA
  • Pomocny post
    #2 13469054
    Smolarz
    Poziom 12  
    Posty: 208
    Pomógł: 1
    Ocena: 17
    HTML:
    <label class="label_check" for="sample-check">
        <input name="sample-check" id="sample-check" value="1" type="checkbox" />
        Sample Label
    </label>
    
    <label class="label_radio" for="sample-radio">
        <input name="sample-radio" id="sample-radio" value="1" type="radio" />
        Sample Label
    </label>



    CSS:
    .has-js .label_check,
    .has-js .label_radio { padding-left: 34px; }
    .has-js .label_radio { background: url(radio-off.png) no-repeat; }
    .has-js .label_check { background: url(check-off.png) no-repeat; }
    .has-js label.c_on { background: url(check-on.png) no-repeat; }
    .has-js label.r_on { background: url(radio-on.png) no-repeat; }
    .has-js .label_check input,
    .has-js .label_radio input { position: absolute; left: -9999px; }


    JS:
    var d = document;
    var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
    var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
    onload = function() {
        
        var body = gebtn(d,'body')[0];
        body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
        
        if (!d.getElementById || !d.createTextNode) return;
        var ls = gebtn(d,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_') == -1) continue;
            var inp = gebtn(l,'input')[0];
            if (l.className == 'label_check') {
                l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
                l.onclick = check_it;
            };
            if (l.className == 'label_radio') {
                l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
                l.onclick = turn_radio;
            };
        };
    };
    var check_it = function() {
        var inp = gebtn(this,'input')[0];
        if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
            this.className = 'label_check c_on';
            if (safari) inp.click();
        } else {
            this.className = 'label_check c_off';
            if (safari) inp.click();
        };
    };
    var turn_radio = function() {
        var inp = gebtn(this,'input')[0];
        if (this.className == 'label_radio r_off' || inp.checked) {
            var ls = gebtn(this.parentNode,'label');
            for (var i = 0; i < ls.length; i++) {
                var l = ls[i];
                if (l.className.indexOf('label_radio') == -1)  continue;
                l.className = 'label_radio r_off';
            };
            this.className = 'label_radio r_on';
            if (safari) inp.click();
        } else {
            this.className = 'label_radio r_off';
            if (safari) inp.click();
        };
    };
  • REKLAMA
  • Pomocny post
    #3 13469179
    zwrotnica
    Poziom 16  
    Posty: 235
    Pomógł: 9
    Ocena: 51
    Uzytkownik_1994 napisał:

    <input type="radio"
    Z tym, że chciałbym sam stworzyć obrazek, który będzie przyciskiem. A nie mieć kółko, które zaznaczam.

    Tutaj jest o samych obrazkach jako przyciskach. Może też się przyda?

    Cytat:
    <input type="button" value="Przycisk 1"><br>
    ...
    <button>Przycisk 2</button>
    ...
    <button><img src="webdir.gif" width="101" height="77" alt="Kliknij"></button>
    ...
    <input type="image" src="webdir.gif" alt="Wyślij">
  • REKLAMA
  • #4 13469737
    Uzytkownik_1994
    Poziom 9  
    Posty: 13
    Dzięki wielkie ;) Za jedno i drugie rozwiązanie, chociaż skorzystałem z pierwszego, bo chodziło mi rozwiązanie z css.

    Mam jeszcze jedno zapytanie jak zrobić, np , że mam te przyciski oraz na dole strony oddzielny obrazek np. góry
    i po zaznaczeniu dajmy na to przykładowego przycisku kwiatka, na dole strony obrazek gór zamieni się na obrazek kwiatka.

    Znów dzięki :)
REKLAMA