Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/60: Рейтинг темы: голосов - 60, средняя оценка - 4.85
694 / 534 / 40
Регистрация: 22.06.2009
Сообщений: 1,293

Radio buttons Картинка вместо переключателя

09.06.2010, 12:39. Показов 12283. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть стандартный набор radio input'ов
HTML5
1
<input type="radio">
Обычная такая форма.
Выглядит примерно как на картинке в самом низу.
Полный кружочек для выбранного input, пустой для невыбранного.

Внимание вопрос.
Можно ли как то сделать чтобы вместо этих стандартных кружочков были картинки?
Картинки могут быть любые. Желательно чтобы для каждого input можно было указать свою.

Первый раз столкнулся с такой задачей. Предварительное решение — скрипт на js у меня есть, но интересует именно html, css решение.
Если вы такого решения не знаете, то буду рад и вашему варианту на javascript. Возможно он будет лучше.
Вариант на javascript который я уже нашел расположен здесь: http://ryanfait.com/resources/... o-buttons/
Изображения
 
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
09.06.2010, 12:39
Ответы с готовыми решениями:

Input type="radio" Картинка вместо кнопки в Firefox
input.styled { background: url(img/bitcoin.png) no-repeat 0 0; width:173px; height:75px; appearance:none; ...

картинка вместо submit
Привет, друзья. Такой вопрос! есть файл php в котором есть код: echo&quot; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;font...

Картинка вместо верхнего индекса!
имею: &lt;td class=&quot;f_menu10&quot; name=&quot;a6&quot; id=&quot;a6&quot;&gt;&lt;a href=&quot;/spec.htm&quot;&gt;Спецпредложения&lt;/a&gt;&lt;sup&gt;&lt;img...

2
36 / 36 / 8
Регистрация: 13.05.2010
Сообщений: 70
10.06.2010, 11:59
ну например так (это как пример поэтому особо не бейте ):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
    <head>
        <title></title>
        <script src="jquery-1.4.2.js"></script>
        <link href="bttn.css" rel="stylesheet" media="all" />
        <script src="bttn.js"></script>
        <script>
            $(document).ready(function() {
                $('input').Bttn({
                    useFilter : true
                });
            });
        </script>
    </head>
<body>
    <form action="index.php" method="post">
        <input type="hidden" name="coffe" value="0">
        <input type="checkbox" checked rel="true" title="Кофе" name="coffe" value="1">
        <input type="hidden" name="ice_creame" value="0">
        <input type="radio" rel="true" title="Мороженое" name="ice_creame" value="1">
        <input type="submit" value="go">
    </form>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.bttn-container {
    clear: both;
    display: inline-block;
    padding: 2px;
    line-height: 30px;
}
 
.bttn-checkbox {
    display: block;
    background: url("checkbox.gif") no-repeat 0 0;
    line-height: 16px;
    margin: 4px;
    height: 18px;
    width: 18px;
    float: left;
}
 
.bttn-radio {
    display: block;
    line-height: 16px;
    background: url("radio.gif") no-repeat 0 0;
    margin: 4px;
    height: 18px;
    width: 18px;
    float: left;
}
 
.bttn-checkbox.disabled {
    background-position: 0 0;
    opacity: 0.6;
    filter: opacity(alpha=50);
}
 
.bttn-radio.disabled {
    background-position: 0 0;
    opacity: 0.6;
    filter: opacity(alpha=50);
}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
(function($) {
$.fn.Bttn = function(s) {
    var settings = {
        useFilter : false,
        filter : '[rel="true"]'
    };
    settings = $.extend(true, settings, s);
    var StdButton = settings.useFilter ? this.filter(settings.filter) : this;
    
    function init() {
        StdButton.each(function() {
            _set_button_interface(this);
        });
    };
    
    function $A(iterable) {
        if(!iterable) {
            return new Array();
        } else if(iterable.toArray) {
            return iterable.toArray();
        } else {
            var result = new Array();
            for(var x = 0; x < iterable.length; x++) {
                result.push(iterable[x]);
            }
            return result;
        }
        return null;
    }
 
    function _bttn_handler() {
        var args = $A(arguments),
        __method = args.shift();
        return function(event) {
            var __object = $(this);
            return __method.apply(__object, [event||window.event].concat(args));
        };
    }
    
    function _set_button_interface(bttn) {
        var _container = $('<span class="bttn-container"></span>');
        $(bttn).before(_container).css({ display: 'none' });
        var _new_bttn = $('<div rel="_new_bttn_interface"></div>');
        
        _container.append(_new_bttn);
        if(bttn.type == 'checkbox') {
            _new_bttn.addClass('bttn-checkbox');
        } else if(bttn.type == 'radio') {
            _new_bttn.addClass('bttn-radio');
        }
        _container.append(bttn.title);
        bttn.checked ? _new_bttn.css('background-position', '0 -50px') : null;
        
        if(!bttn.disabled)
            _new_bttn
                .mousedown(_bttn_handler(_bttn_pushed, bttn))
                .mouseup(_bttn_handler(_bttn_checked, bttn));
        else
            _new_bttn.addClass('disabled');
    };
 
    function _bttn_pushed(e, oldid) {
        if(oldid.checked == true && oldid.type == "checkbox") {
            this.css('background-position', '0 -75px')
        } else if(oldid.checked == true && oldid.type == "radio") {
            this.css('background-position', '0 -75px')
        } else if(oldid.checked != true && oldid.type == "checkbox") {
            this.css('background-position', '0 -25px')
        } else {
            this.css('background-position', '0 -25px')
        }
    };
    
    function _bttn_checked(e, oldid) {
        if(oldid.checked == true) {
            oldid.checked = false;
            this.css('background-position', '0 0')
        } else {
            oldid.checked = true;
            this.css('background-position', '0 -50px')
        }
    };
    init();
};
})(jQuery);
Добавлено через 16 минут
не много исправленная версия функции _bttn_checked
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    function _bttn_checked(e, oldid) {
        if(oldid.checked == true) {
            oldid.checked = false;
            this.css('background-position', '0 0')
        } else {
            StdButton.each(function(i) {
                if(this.checked 
                    && this.type == 'radio'
                    && !this.disabled
                    && oldid != this) {
                    this.checked = false;
                    $(".bttn-radio").css('background-position', '0 0');
                }
            });
            oldid.checked = true;
            this.css('background-position', '0 -50px');
        }
    };
Добавлено через 18 часов 39 минут
Цитата Сообщение от Alorian Посмотреть сообщение
Желательно чтобы для каждого input можно было указать свою.
ну если скрипт до работать до думаю для каждого input можно будет указывать свои картинки ну и не только...
1
694 / 534 / 40
Регистрация: 22.06.2009
Сообщений: 1,293
10.06.2010, 13:01  [ТС]
dev001, Можете схему того что происходит написать? Я в jquery не особо силен.

В скрипте по моей ссылке, насколько я понимаю, происходит примерно такое:
1. Всем input присваивается свойство display:none
2. Сразу за input создается span.
3. На span вешаются обработчики событий, и через background задается картинка.
4. По клику у картинки изменяется видимая для пользователя область через background-position.
Основной алгоритм понятен.

После разбора вашего скрипта основной алгоритм мне кажется примерно таким же, только есть несколько непонятных мне областей. В 5-10 нумерованных строчках можете суть происходящего изложить?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
10.06.2010, 13:01
Помогаю со студенческими работами здесь

Картинка вместо маркера списка
Здравствуйте. Нужно вместо символа маркера списка использовать картинку с зданными размерами. Как это реализовать? Сказали что нужно...

Checkbox, картинка вместо галочки
Добрый вечер, столкнулся с такой проблемой, нужно вместо галочки в чекбоксе сделать чтобы отображалась картинка.. Делаю по этой статье...

Картинка вместо ссылки на скачку
Здраствуйте , я хотел бы узнать как здеть так чтобы люди на сайте видели не ссылку на скачку , а красивую картинку на которую кликаешь и их...

Шрифт или картинка вместо логотипа
Здравствуйте, уважаемые программисты, у меня не большая проблема с доработкой своего сайта. http://adressalavat.ru/. 1. Нужен совет!!!...

Не вставляется картинка. Вместо неё квадрат
&lt;IMG scr=&quot;Okno.png&quot; /&gt; картинка лежит в папке с документом. Пробовал создать папку для картинок, но опять такая штука. Пробовал в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
Фото: Daniel Greenwood
kumehtar 13.11.2025
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru