Submit картинкою

Здрастуй шановний Новомосковсктель блогу LifeExample. ти пам'ятаєш як виглядали інтернет ресурси на зорі становлення сайтостроения? Сайти кінця 20 століття були просто дерев'яними, і чисто інформативними, а дизайн був лише натяком на краще майбутнє. І ось майбутнє потихеньку підходило, підкрадалася, підповзає і нарешті прийшло, сьогодні зайшовши у всесвітню павутину можна довго сидіти з відкритим ротом насолоджуючись чудовим дизайном того чи іншого ресурсу. Анімовані кнопки, закруглені кути, тіні від об'єктів, градієнт і багато інших ласощів веба, які не могли собі дозволити веб-майстри ще 10-ть чи навіть 5-ть років тому, сьогодні доступно кожному новачку.

Мова сьогодні піде про такий керуючому елементі як SUBMIT. необхідному при використанні форм, для відправки запитів. Кнопка, якої є цей об'єкт, виглядає не сучасно і не естетично, тому багатьом напевно захочеться змінити її зовнішній вигляд під стати часу. Зробити це можна багатьма способами, і кожен з них буде, по своєму, правильним і оптимальним в розрізі того чи іншого завдання.

Найпростіший для розуміння і легкий у використанні спосіб полягає у використанні альтернативного типу-IMAGE. для відсилання даних на сервер.

Приклад 1 (SUBMIT картинкою за допомогою типу IMAGE):

Уявімо, що у нас є якийсь SUBMIT з такими параметрами:

Для того щоб замінити сумну кнопку на, кнопку відповідає вашому дизайну замінимо параметри в input на такі:

Замість трьох крапок, потрібно вказати шлях до картинки, яку ви хочете спостерігати на місці старої кнопки. Все, більше робити нічого не треба, дані форми будуть тепер надсилатися за допомогою елемента IMAGE. також в запиті будуть відправлятися координати, на які потрапив покажчик миші при натисканні на кнопку, що теж може бути корисним в деяких випадках.

Спробували і у вас все працює? Не поспішайте радіти, працює, але не у всіх випадках, наприклад в деяких браузерах такий спосіб чомусь не завжди коректно замінює функціонал submit, принаймні мені довелося з цим зіткнутися.

Самий не раціональний спосіб, але тим не менше робочий, полягає він у використанні Java Script.

Приклад 2 (SUBMIT картинкою за допомогою Java Script):

Також як і в першому варіанті замінюємо крапки на шлях до картинки і насолоджуємося робочої альтернативою submit`a. У цього способу є один недолік - якщо в браузері буде відключений Java Script, то спосіб працювати не буде.

На мій погляд, самий універсальний і самий робочий спосіб, хоч і вимагає певних танців з бубном навколо правил css.

Приклад 3 (SUBMIT картинкою правила css)

У submit`е прописуємо клас sendsubmit, який буде заміняти інтерфейс кнопки картинкою.

sendsubmit # 123;
width. 33px; // довжина кнопки
height. 33px; // висота кнопки
margin. 0;
padding. 0;
border. 0;
background. transparent url # 40; 'Шлях до картинки' # 41; no-repeat center top;
text-indent. -1000em;
cursor. pointer;
cursor. hand;
# 125;

Якщо параметр value повинен збігається з написом на кнопці, то правило text-indent: -1000em можна опустити.