Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Как сделать кнопку с картинкой?


Автор: kuksha 20.10.2014, 15:29
В Веб-форме нужно сделать кнопку с картинкой.
Нажал первый раз -  картинка сменилась, осталась нажата.
Нажал второй раз - отжалась, картинка вернулась к исходной.
При этом надо производить некие действия и иметь возможность считывать значение элемента (или сохранять его где-то).
По описанию получается чекбокс...

Пробовал несколько вариантов чекбоксов в виде картинок. Везде хромала кроссбраузерность разными способами. 
Кнопки спрайтами CSS не удовлетворили - они реагируют на наведение мышкой или однократное нажатие. Второй раз уже не нажимаются или я не нашёл как.

Нужен дубовый вариант, который работает везде. 
Есть примеры?


Автор: Aliance 30.10.2014, 11:13
http://jsfiddle.net/4huzr/

Автор: BaNru 30.10.2014, 23:20
Дубовый вариант - это CSS3, предложенный ваше + дублирование на JS (или jQ для упрощения), для старых браузеров.
Ты бы написал какая кроссбразуерность нужна. Надо ли IE6, а может надо IE5?

Вот статьи (с первой страницы гугла) подробно расписывающие вариант предложенный Aliance
http://htmlbook.ru/blog/kartinka-vmesto-chekboksa
http://habrahabr.ru/post/144104/
http://habrahabr.ru/sandbox/58557/
http://xiper.net/collect/html-and-css-tricks/verstka-form/nice-checkbox

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)