Английский язык: задание с выбором пропущенных слов nickolay's blog / 12.10.2011 После прочтения этого поста вы узнаете: как сделать небольшое задание по английскому языку (простым изменением текста можно сделать задание практически для любых уроков) на JS, как сделать кнопки-ролловеры (кнопки, которые изменяются при наведении и клике) с нуля.Конечный результат:Для начала воспользуемся предыдущим шаблоном и нарисуем требуемые изображения. Нам потребуется фоновая текстура и три состояния кнопки: обычное состояние, при наведении и при клике.Рисуем фоновую текстуру. Я выбрал фон в виде тетради в клетку. Для этого создаем маленькое квадратное изображение, размером в клетку в любом графическом редакторе и на левой и верхней стороне светлым цветом рисуем линию клетки:(css/img/bg.png)Теперь если совместить множество копий таких картинок получится фон в клетку.Нарисуем три состояния кнопки. Их можно объединить в один спрайт, но так как предполагается автономная работа с веб-страницой, то можно сделать каждое состояние в отдельном файле.Делаем обычное состояние. Для этого я использовал Adobe Photoshop. Создаем пустое изображение размером 234*73, рисуем на новом слое прямоугольник со скругленными углами соответствующим инструментом, щелкаем по слою с этим прямоугольником и выбираем следующие настройки стиля: белая обводка 1px, внешняя; градиентная заливка сверху вниз от светло голубого до голубого; небольшая тень. Далее создаем дубликат текущего слоя (Ctrl + J), делаем заливку 0%, убираем наложения градиента и тень. Обводку делаем внутреннюю и тёмно-голубую.Далее добавляем текст по середине и делаем его тёмно-серым или тёмно-синим, добавляем к нему белую тень с режимом наложения "Нормальный" и смещение/размер - 1px, направление тени вниз, без использование глобального освещение. В результате у меня получилась такая кнопка:check.pngСоздаем ещё два состояния на основе этой картинки, при наведении делаем кнопку чуть светлее и меняем цвет обводки:check_h.pngПри клике инвертируем градиент и делаем чуть темнее текст:check_d.pngКнопка готова, осталось только сделать для неё стиль. Чтобы вставить кнопку на страницу будем использовать конструкцию:У неё id будет button, сделаем для неё стиль:При обычном состоянии у блока button будет фоновая картинка - check.png. При наведении мышки - check_h.png (для этого используем псевдокласс hover) и при клике - check_d.png.Полный стиль будет таким:В фоне body используется файл bg.png (кусочек клетки тетради), который с помощью команды repeat будет повторятся и создавать полноценный фон.Сама страница у меня выглядит так:Варианты ответов сделаны с помощью select с именем v, ответы на задания хранятся в самом верху и внизу добавлено кнопка проверки, которая при клике вызывает функцию check(). Давайте же тогда напишем код данной функции, но сначала получим все элементы со страницы с именем v:Вот и всё. Можете в живую посмотреть как это работает здесь. Все элементы сделаны большими, чтобы было удобнее пользоваться на тач-интерфейсах. Скачать архив со всеми исходниками можно здесь. 1:1 английский интерактивная доска