DjTarik

Подскажите, возможно ли это вообще? Может я зря парюсь?)

как раз таки без и и не получается... Разобрался с вызовом, но не могу сделать переменную i глобальной... Ща выложу код. onload = ChangeInput; function ChangeInput() { var list = document.getElementById('SwitchWrap'); // id списка var array = list.getElementsByTagName('input'); // массив из элементов 'input' for (i = 0; i<array.length; i++) { var el = array[i]; // 'input' var parent = el.parentNode; // 'label' neighbor = el.previousSibling; // 'span' // замыкания на i (function(i) { parent.onclick = function (){Extra(i);} })(i); }; }; function Extra(i) { alert(i); } Так работает. А если я делаю 'i' глобальной - не получается.( Глобальной - это я так понимаю onload = ChangeInput; var i; function ChangeInput() { ...

Блин... вроде понятно... Не могу допереть, а как это всё провернуть с функцией? У меня на события вызываются функции...

Не так ответил, Сорри) Я свои вопросы запихнул в твою цитату) UPD: Подскажи, куда копать) 1. Я так понял - можно в цикле присвоить? 2. У меня проблема и переменными, или с установкой события? Про попробовал - это я к тому, что через .setAttribute не прокатит. Ща ещё твою ссылку гляну.

Я уже попробовал)

Не, не пашет. Да и об этом я читал, что вроде не должно. вот теперь не могу понять, как тогда поступить? Не хочется же каждому инпуту прописывать по три события...(

Вроде ж не будет работать в IE6.

Немного не понял. Это вообще реально, то, что я хочу сделать? (проставить всем инпутам события через цикл)

Не получается. // !!! --> onload = ChangeInput; var neighbor; function ChangeInput() { var list = document.getElementById('SwitchWrap'); // id списка var array = list.getElementsByTagName('input'); // массив из элементов 'input' for (var i = 0; i<array.length; i++) { var el = array[i]; // 'input' var parent = el.parentNode; // 'label' neighbor = el.previousSibling; // 'span' alert(neighbor); if(el.checked) { neighbor.setAttribute('class','on'); parent.addEventListener("mouseover", OnHoverInput, false); parent.addEventListener("mouseout", OnInput, false); } else { neighbor.removeAttribute('class'); parent.addEventListener("click", ChangeInput, false); parent.addEventListener("mouseover", OffHoverInput, false); parent.addEventListener("mouseout", OffInput, false); }; }; }; // --> function OnHoverInput() { neighbor.setAttribute('class','on-hover'); }; function OnInput() { neighbor.setAttribute('class','on'); }; // --> function OffHoverInput() { neighbor.setAttribute('class','off-hover'); }; function OffInput() { neighbor.removeAttribute('class'); }; // --> и кусок из HTML: <ul id="SwitchWrap"> <li><label for="switch_6"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_6" />Переключатель 6</label></li> <li><label for="switch_7"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_7" />Переключатель 7</label></li> <li><label for="switch_8"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_8" />Переключатель 8</label></li> <li><label for="switch_9"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_9" />Переключатель 9</label></li> <li><label for="switch_10"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_10" />Переключатель 10</label></li> </ul> Срабатывает только на последнем инпуте. Почему не работает в цикле? Я так понимаю, события должны были присвоиться каждому инпуту? p.S. Пока что только для FF.

То ли я кривой или плохо смотрел - но не нашёл прямой ссылки на изображение. Есть ссылка на страницу с этим изображением - я прямой ссылки, типо взял да скопипастил, нету... O_o

Ну, я так понимаю, что их можно юзать только в форматировании контента. В самой вёрстке это недопустимо...

Просто спаны там уже есть, а задавать кучу классов я не хочу. Т.е, в принципе, это нормально?)

Короче, есть детский вопрос: Есть кусок кода: <!-- phone block --> <div class="information phone"> <h5>Телефоны:</h5> <address> <span class="pad-50"> Тел.:<br /><br /><br /> Моб.:<br /><br /> </span> <span> +123 (45) 678-90-12<br /> +123 (45) 678-90-12<br /><br /> +123 (45) 678-90-12 Velcom<br /> +123 (45) 678-90-12 МТС </span> </address> </div> <!-- // phone block // --> Так как в <address> нельзя использовать блочные элементы (да и не особо хотелось тегами загромождать короткий участок кода) - есть такое решение: форматировать текст с помощью <br />. Результат везде одинаково ровный. 1. Как вы относитесь к такому коду? =) Кто-нить так оформляет? 2. Как к подрят идущим <br /> относятся поисковики? O_o Спасибо...

В общем, нужна ваша помощь: Теория: Имеется картинка-спрайт на 4-е состояния: 1. Выключен. 2. Выключен, но с наведённой мышкой. 3. Включён. 4. Включён, но с наведённой мышкой. Положение cпрайта задаётся классами в CSS. HTML: <body onload="ChangeInput('SwitchWrap')"> <form action="#" enctype="application/x-www-form-urlencoded" method="get" id="ChangeForm" class="change-form"> <fieldset> <legend>Стилизованный "input type='radio'"</legend> <ul id="SwitchWrap"> <li><label for="switch_6"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_6" />Переключатель 6</label></li> <li><label for="switch_7"><span><!-- // --></span><input type="radio" name="#" value="#" checked="checked" id="switch_7" />Переключатель 7</label></li> <li><label for="switch_8"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_8" />Переключатель 8</label></li> <li><label for="switch_9"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_9" />Переключатель 9</label></li> <li><label for="switch_10"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_10" />Переключатель 10</label></li> </ul> </fieldset> </form> JS: function ChangeInput(obj) { var form = document.getElementById(obj); // id списка var array = form.getElementsByTagName('input'); // массив из элементов 'input' for (var i = 0; i<array.length; i++) { var el = array[i]; // 'input' var parent = el.parentNode; // 'label' var neighbor = el.previousSibling; // 'span' if(el.checked) { neighbor.setAttribute('class','on'); parent.setAttribute('onmouseover','OnHoverInput(this)'); parent.setAttribute('onmouseout','OnInput(this)'); } else { neighbor.removeAttribute('class'); parent.setAttribute('onclick','ChangeInput("SwitchWrap")'); parent.setAttribute('onmouseover','OffHoverInput(this)'); parent.setAttribute('onmouseout','OffInput(this)'); }; }; }; // --> function OnHoverInput(obj) { obj.firstChild.setAttribute('class','on-hover'); }; function OnInput(obj) { obj.firstChild.setAttribute('class','on'); }; // --> function OffHoverInput(obj) { obj.firstChild.setAttribute('class','off-hover'); }; function OffInput(obj) { obj.firstChild.removeAttribute('class'); }; // --> В принципе, всё работает. Пока только в FF проверял. Вопросов несколько, поэтому по списку: 1. Если мне нужно установить события 'onmouseover' и 'onmouseout' - это можно сделать только таким способом, как у меня? Через '.setAttribute'? Или как правильно? 2. Я присваиваю класс через "setAttribute('class','on')" - в IE не работает. Я так понимаю, что из-за 'class'? Как быть? Я нуб в JS, так что сильно не пинайте. Расскажите, что к чему. =) Спасибо.

1. Не всегда. 2. Я про это и говорю - переписывать для него стиль, который мы обнулили. 3. Это Вы заказчику объяснять будете =) 4. Если Вам такие знания ни к чему - можно больше не отвечать в этой теме. Мне они пригодятся. Тем более, что остался только IE( Всё остальное я уже узнал.

Ну, и ещё на таких мелких иконках, кликабельную область стоит делать больше... Пикселей на 5-10. Очень повышает юзабилити)

Если размер изображения (вставляемого через <img>) меньше чем 12px (или что-то около того, точно не могу сказать) - то alt="" виден не будет. Соответственно, если не задавать ширину и высоту - тогда текст в alt="" "растянет" размеры рамки под себя.

не, ну бывают исключения))) на счёт иконок - согласен. Так и делаю.

Однозначно в HTML. По-ходу по спецификации просят, чтобы картинкам был задан размер, да и при отключенной графике в большинстве браузеров верстка не схлопнется/развалится.

ладно... тема-то не о ресетах... Там и так уже всё пережёвано) Кто что ещё по теме может сказать?

Самый простой пример: Вы сверстали сайт (использовали ресет). Всё круто, кроссбраузерно. Отдали вёрстку и забыли про неё. Через неделю, когда её подключат к CMS, вам её вернут, и скажут: "Что за лажа? Мы ввели текст через визуальный редактор - а все теги выглядят одинаково!" И вам придётся настраивать все теги, которые использует редактор заново. Делать их такими, какими они были изначально (т.е. те самые стили по умолчанию, которые мы обнулили в самом начале нашей работы). Поэтому, или сразу настраивать стили под редактор, или не обнулять. Я теперь их переопределяю в своей верстке. Поэтому знание стилей по умолчанию - просто даст ещё большую квалификацию и знания...

Ну, пойду и там покопаюсь... Вряд ли конечно... Ну, отличий много, большинство известны... Но всё равно хотелось бы знать) P.S. Я с недавнего времени не использую ресет...

Я так понимаю, для IE это нереально?

ладно =) буду пробовать на дивах) А если вообще без них? Т.е. сразу лэйбл и инпут?)))))))))))))))