Submit картинкой
Здравствуй уважаемый читатель блога,
ты помнишь как выглядели интернет ресурсы на заре становления
сайтостроения? Сайты конца 20 века были просто деревянными, и чисто
информативными, а дизайн был лишь намеком на лучшее будущее. И вот
будущее потихоньку подходило, подкрадывалось, подползало и наконец
пришло, сегодня зайдя во всемирную паутину можно долго сидеть с открытым
ртом наслаждаясь великолепным дизайном того или иного ресурса.
Анимированные кнопки, скругленные углы, тени от объектов, градиент и
много других вкусностей веба, которые не могли себе позволить
веб-мастера еще 10-ть или даже 5-ть лет назад, сегодня доступно каждому
новичку.
Речь сегодня пойдет о таком управляющем элементе как SUBMIT,
необходимом при использовании форм, для отправки запросов. Кнопка,
которой является сей объект, выглядит не современно и не эстетично,
поэтому многим наверняка захочется изменить ее внешний вид под стать
времени. Сделать это можно многими способами, и каждый из них будет, по
своему, правильным и оптимальным в разрезе той или иной задачи.
1й способ
Самый простой для понимания и легкий в использовании способ заключается в использовании альтернативного типа– IMAGE, для отсылки данных на сервер.
Пример 1 (SUBMIT картинкой с помощью типа IMAGE):
Представим, что у нас есть некий SUBMIT с такими параметрами:
1
| <input type="submit" name="send" value="Отправить" /> |
Для того чтобы заменить унылую кнопку на, кнопку соответствующую вашему дизайну заменим параметры в input на такие:
1
| <input type=”image” name=”picture” src="…" /> |
Вместо многоточия, нужно указать путь к картинке, которую вы хотите
наблюдать на месте старой кнопки. Все, больше делать ничего не надо,
данные формы будут теперь отсылаться с помощью элемента IMAGE,
также в запросе будут отправляться координаты, на которые попал
указатель мыши при нажатии на кнопку, что тоже может быть полезным в
некоторых случаях.
Попробовали и у вас все работает? Не спешите радоваться, работает, но
не во всех случаях, например в некоторых браузерах такой способ почему
то не всегда корректно заменяет функционал submit, по крайней мере мне
пришлось с этим столкнуться.
2й способ
Самый не рациональный способ, но тем не менее рабочий, заключается он в использовании Java Script.
Пример 2 (SUBMIT картинкой с помощью Java Script):
1
2
3
| <a href="#" onClick="document.send.submit();">
<img src="…" name="send" border="0" />
</a> |
Также как и в первом варианте заменяем многоточие на путь к картинке и
наслаждаемся рабочей альтернативой submit`a. У этого способа есть один
недостаток – если в браузере будет отключен Java Script, то способ
работать не будет.
3й способ
На мой взгляд, самый универсальный и самый рабочий способ, хоть и требует определенных танцев с бубном вокруг правил css.
Пример 3 ( SUBMIT картинкой правила css )
В submit`е прописываем класс sendsubmit, который будет заменять интерфейс кнопки картинкой.
1
| <input type="submit" class="sendsubmit" name="send" value="Отправить" /> |
В файле стилей css прописываем следующее:
1
2
3
4
5
6
7
8
9
10
11
| .sendsubmit {
width: 33px; // длина кнопки
height: 33px; // высота кнопки
margin: 0;
padding:0;
border: 0;
background: transparent url(‘путь к картинке’) no-repeat center top;
text-indent: -1000em;
cursor: pointer;
cursor: hand;
} |
Если параметр value должен совпадает с надписью на кнопке, то правило text-indent: -1000em можно опустить.
Мы рассмотрели три часто используемых способа для изменения внешнего
вида кнопки SUBMIT. Каждый их этих способов имеет свои плюсы и минусы,
для себя я выбрал третий способ и стараюсь использовать именно его, т.к.
считаю этот метод более стабильным нежели два других. Каким из
перечисленных трех способов, пользоваться выбирать тебе дорогой
читатель. Если ты имеешь свою точку зрения на решения этой проблемы , не
стесняйся, пиши в комментариях.
| 
