HTML+CSS+JavaScript

Доброго всем времени суток!

Втсал такой вопрос, можно ли стандарной радио кнопке придать следующий вид (см. приложение) ?
Тоесть вместо обычной точки чтобы была нарисованная кнопка.

И отсюда второй вопрос, можно ли сделать так: если кнопка активна, она например зеленая, когда неактивна, тоесть не выбрана, она синяя?

Если можно то опишите пожалуйста как. Ввиду моей не приспособленности к графике, пожалуйста, поподробнее.

Спасибо.

если я правильно понял, возможно нужен чекбокс, то тогда вот,
када-то себе писал, надеюсь под себя сможете переделать)

Function.prototype.onload = function() {     var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;     if (root) {         if (root.addEventListener) root.addEventListener("load", this, false);         else if (root.attachEvent) root.attachEvent("onload", this);     } } /// var _checkbox = {     init: function() {         var inps = document.getElementsByTagName("INPUT");         if(!inps.length) return false;         var a, b, c;         var msie = inps[0].attachEvent && navigator.userAgent.indexOf("Opera") == -1 ? true : false;         for(var i = 0, l = inps.length; i < l; i++) {             if(inps[i].type != "checkbox") continue;             if(inps[i].className.indexOf('checkbox') == -1) continue;             a = document.createElement("SPAN");             with(a) {                 className = inps[i].className;                 onclick = function() { _checkbox.checked(this) }                 if(msie) {                     onmouseover = function() { this.className += ' hover' }                     onmouseout  = function() { this.className = this.className.replace(' hover', '') }                 }             }             b = document.createElement("DIV");             c = inps[i].parentNode.replaceChild(a, inps[i]);             b.appendChild(c);             a.appendChild(b);             if(c.checked) _checkbox.checked(a);             if(c.disabled) _checkbox.disabled(a);         }     },     checked: function(obj, mode) {         if(!obj) return false;         var checked = typeof mode == 'boolean' ? mode : obj.className.indexOf('checked') > -1;         var x = obj.firstChild.firstChild;         if(typeof mode == 'boolean') {             x.checked = checked;             checked = checked ? false : true;         } else {             x.checked = checked ? false : true;         }         if(checked)             obj.className = obj.className.replace(' checked', '');         else             obj.className += ' checked';         return x.checked;     },     disabled: function(obj, mode) {         if(!obj) return false;         mode = typeof mode == 'boolean' ? mode : true;         if(mode) {             obj.onclick = '';             obj.className += ' disabled';         } else {             obj.onclick = function() { _checkbox.checked(this) }             obj.className = obj.className.replace(' disabled', '');         }         return mode;     } } //// /* ------------------------ Checkbox ------------------------ */ input.checkbox { display: none } span.checkbox {     display: inline-block;     width: 14px;     height: 14px;     font-size: 0px;     background: url(checkbox.png) bottom left; } span.checkbox:hover, span.checkbox.hover {     background: url(checkbox.png) center left; } span.checkbox.checked {     background: url(checkbox.png) top left; } span.checkbox input { display: none; visibility: hidden } span.checkbox.disabled {     opacity: 0.7;     filter: alpha(opacity=70); } //// <input type="checkbox" class="checkbox" name="checkbox1" value="true1"> <input type="checkbox" class="checkbox" name="checkbox2" value="true2" checked> <input type="checkbox" class="checkbox" name="checkbox3" value="true3" disabled> ////

всего навсего нужно добавить к стандартной кнопке "class="checkbox" чтобы она была изменена.

вобщем радио-кнопка. ну да ладно пускай будет чекбокс))
я так понял ява скрипт выполняется тут и еще есть елементы css.

не могли бы подсказать как разбить весь ваш пример кода на части, а именно где начинается и заканчивается ява скрипт и прописать его запуск к чекбоксу. А лучше просто прикрепить его в аттач.

Я правильно понял стили нужно прописать в файл со стилями? А чекбоксы должны обязательно быть помечены?

>>А чекбоксы должны обязательно быть помечены?
нет, я переделаю:)

выложу немного позже, расфасую всё как надо и выложу :)

ок спасибо) буду ждать.

Когда будете "фасовать", не забудьте, что псевдокласс :hover в MSIE работает ТОЛЬКО у ссылок.

для этого в скрипте он насильно лепится для мсие:)

вопщем вот вроде как просили: >>>>

спасибо вам огромное!
но вот новый аблом..(( поскольку чекбокс, то получается выбрать можно несколько вариантов, а мне нужно чтобы можно было выбрать только один из вариантов.. в том то и отличие радио кнопки получается..

а для радио кнопки можно такое сделать??

sl1p в любом случае спсибо за суету все равно очень пригодиться то что вы мне дали.

и еще один момент , а как дать имена то чекбоксам, вместо checkbox #0 checkbox #1 checkbox #2??

можно) есть заготовочка, только кривоватая.. доделаю, брошу)

спасибо еще раз, я тогда жду..

и еще один момент , а как дать имена то чекбоксам, вместо checkbox #0 checkbox #1 checkbox #2??

в атрибуте title

сори не заметил тайтл))

ожидаю ваш скрипт, очень нада, ибо сам я яву не знаю, неасилю написание..(

сори за назойливость, оч нужен скрипт, мне щас нада решать ибо сроки поджимают.
вы сможете выложить в ближайшие несколько дней???

Да, я извиняюсь, через пол часика постараюсь выложить.

прошу --->

Оргромнейшее спасибо и респект!!!))))

вот очень простой способ это зделать менять можно все формы
http://www.emblematiq.com/projects/niceforms/

чесно говоря ничего не понятно в вашем линке.

Пройдите по ссылке, проект посвященный оформлению форм, интересная реализация.