На самом деле checkbox и есть картинка, но в данном примере мы стандартную картинку заменим своей красивой!

Собственно надоели убогие checkbox’ы и захотелось красоты, вот что было найдено на эту тему

Fancy Form – http://lipidity.com/fancy-form

Использует как основу javascript framework Mootools 1.11, облегченная версия которого входит в пакет загрузки Fancy Form

Второй не менее интересный вариант это Protocheck – http://bugrain.com/projects/protocheck/

Использует javascript framework Prototype – в пакет закачки эта библиотека не входит, ее нужно отдельно скачивать на  сайте разработчика www.prototypejs.com

Я выбрал для работы Protocheck, но не из-за его качеств, а только из-за того что он использует protoype, который в данный момент уже присутствует в проекте, т.е. основная цель – это не плодить javascript библиотеки.

В основном, это простая ссылка на document.getElementById(), но несколько более расширенная чем просто ссылка. Ниже показан пример использования:

[cc lang="php"]
node = $(‘elementID’);

// То же самое
node = document.getElementById(‘elementID’);

// Так же можно получать не только один елемент
// В этом случае результат будет массивом DOM елементов
nodes = $(‘firstDiv’, ’secondDiv’);
[/cc]

Prototype так же предлагает функцию, ее нет в ядре JavaScript, которая возвращается массив DOM елементов и как аргумент она принимает имя css класса (class name):
[cc lang="php"]
nodes = document.getElementByClassName(‘myclass’);
[/cc]

Однако, я думаю использовать ее вы будете редко, так как Prototype предлагает более расширенную функцию двойной доллар, $$(). Эта фунция возвращает массив DOM елементов основанных на CSS селекторе (css selector). Таким образом код показанный выше можно записать так:

[cc lang="php"]
nodes = $$(‘.myclass’);
[/cc]

Благодаря мощьности CSS селекторов (css selectors) вы можете парсить модель DOM по классам (class), ID, и родитель-наследник (parent-child) и предыдущий-следующий (previous-next) связям, гораздо проще чем при использовании XPath выражений. Вы можете получить доступ к элементу через сложную комбинацию селекторов:

[cc lang="php"]
nodes = $$(‘body div#main ul li.last img > span.legend’);
[/cc]

И последний пример улучшения синтаксиса предлагаемого Prototype — это each array iterator, подобно как в PHP:

[cc lang="php"]
var vegetables = ['Carrots', 'Lettuce', 'Garlic'];
vegetables.each(function(food) { alert(‘I love ‘ + food); });
[/cc]

Не забывайте подписывать на рассылку.

Дальше будет еще много интересного.