Проблема, яку ми будемо вирішувати, полягає в тому, що звичайні кнопки, сформовані тегом виглядають в різних браузерах по різному. Крім того, при зміні стандартного розміру кнопки, деякі браузери відображають її просто жахливо.
Виявляється можна докласти трохи зусиль і зі звичайної кнопки за замовчуванням зробити стильну і модну, та ще й у всіх популярних браузерах кнопка буде виглядати однаково добре (ну або майже у всіх, майже добре). Тепер поговоримо про це докладно.
Кожен браузер має свою думку
Препарувати будемо для трійці популярних браузерів:
- Mozilla Firefox 3.5
- Opera 9.63
- IE6 (з оглядкою на IE7, щоб йому!)
Ось як інтерпретують простий код наші піддослідні: В принципі, нічого кримінального. Ось тільки пунктирна обведення кнопки в браузері FF, при попаданні на неї фокусу введення, виглядає не красиво. Її можна прибрати. Для цього зазначимо наступне властивість CSS для кнопки класу button:
Тепер давайте зробимо велику модну кнопку і жахлива її зовнішнім виглядом за замовчуванням.
Верстаємо велику модну кнопку
Як не дивно, але кнопка підпорядковується заданим через CSS розмірами. Тому сміливо додаємо кнопці класу button директиви ширини і висоти:
Тепер подивимося, яким чином виглядає наша велика кнопка в трьох піддослідних браузерах: Своїм потворністю вражає кнопка в IE6. До речі, в IE7 вона виглядає ані трохи не краще. Тому кнопка за замовчуванням нам не підходить і ми будемо верстати свою власну кнопку.
Верстка кнопки
Отже, ширину і висоту для кнопки ми вже поставили, тим самим сформували кнопку такого розміру, як нам треба.
Залишається перетворити потвору в красуню.
Для початку намалюємо кнопку в звичайному стані, в стані при наведенні миші і при кліці. Ці зображення збережемо в одному файлі. Тобто застосуємо технологію спрайтів.
Даний графічний файл ми будемо застосовувати в якості фону для нашої кнопки (властивість CSS background-image).
Фонове зображення буде переміщатися при наведенні на кнопку покажчика миші і при кліці по ній. В результаті буде створювати відчуття того, що кнопка натискається.
Ось як виглядає фонове зображення для кнопки:
- У разі за замовчуванням background-position: 0 (можна не вказувати).
- При наведенні миші потрібно перемістити фонове зображення вгору на висоту однієї секції background-position: 0 -56px (горизонтальне зміщення не відбувається, змінюється лише вертикальна координата).
- При кліці необхідно змістити фон ще на одну секцію вгору background-position 0 100%.
Разом зі зміщенням фону непогано було б зміщувати і текст на кнопці. це додасть реалістичності в відчуття натискання.
При наведенні на кнопку покажчика миші я знімаю текст вниз на висоту тіні під кнопкою. Виходить дуже реалістично.
Розмір зміщення для написи (при наведенні миші)
Напис всередині кнопки зміщується шляхом завдання властивості padding.
- При наведенні покажчика миші padding-top: 4px
Додатковою наочності можна домогтися шляхом зміни покажчика миші при наведенні на кнопку, зі стрілки на лапку. Зробити це дуже просто, всього-на-всього вказати властивість cursor: pointer.
Зміна стилю кнопки при наведенні миші і кліці
Для зміни стилів при наведенні покажчика миші і при кліці можна використовувати псевдокласи: hover і: active.
Для кнопки класу buttonпрі наведенні. завдяки псевдоклас: hover. буде застосований наступний стиль:
Властивість background-position змістить фонове зображення в друге положення, а відступ padding-top змістить напис всередині кнопки.
Застосувати потрібні властивості при кліці можна використовуючи псевдоклас: active
Властивість background-position зміщує фонове зображення в третє положення при кліці миші.
Вищеописаний спосіб не підходить для IE6, тому що в ньому псевдокласи: hover і: active працюють тільки для тега посилання a. Не дивлячись на те, що IE7 нормально працює з цими псевдоклас, через свою глючності він жахливо інтерпретує даний код (додає неіснуючі бордери, зміщує кнопку при кліці).
В результаті цей спосіб застосовувати можна, тому що IE6 відживає своє, користуються ним тільки через те, що він встановлений в Windows XP; IE7 - глючний недобраузер, на зміну якому прийшов IE8.
Але все ж, якщо ви хочете зробити динамічну кнопку і для IE, то наступний спосіб цілком згодиться.
До тегу, формує кнопку застосовуємо інструкції:
- Функція OnMouseOver - спрацьовує при попаданні покажчика миші в межі об'єкта і застосовує інструкції, розташовані в її вмісті.
- Функція OnMouseOut - вміст застосовується при виході покажчика миші за межі об'єкта.
- Функція OnMouseDown - спрацьовує при натисканні кнопки миші.
- Функція OnMouseUP - спрацьовує при відпуску кнопки миші.
За допомогою цих чотирьох функцій можна реалізувати досить стерпне відображення кнопки у всіх популярних браузерах.
Відправка даних форми посиланням
Можна і взагалі не морочитися з кнопками, а зробити відправку даних форми за допомогою посилання. А вже як із заслання зробити кнопку ми з вами, шановні читачі, досить докладно обговорювали.
Тепер розглянемо, як формується такий скрипт.
Ось форма відправки:
Даний шматок HTML, як ви напевно здогадалися, формує рядок введення пошукового запиту, підтвердженням для початку пошуку є клік по посиланню "Знайти".
Даний скрипт здійснить відправку (метод submit ()) вмісту полів форми обробнику.
Будьте уважні! Не допускайте попадання в форму myform елементів з name = "submit". інакше скрипт відправки буде звертатися до цього елементу, а не виробляти передачу даних.
Андрій, величезне спасибі і за цю Стас, і особливо за курс блокових верстки. Я верстальник, і з вашими уроками за 2 тижні я багато чого домігся. Про кнопки навіть і не замислювався, але, робив днями тестове завдання для працевлаштування, там якраз знадобилося В) ... як до стате ... Вообщем то там ще знадобилося поле для введення, воно просто незвичайне, я б так сказав розтягнутий овал. Спробував таким же чином спробувати зробити, нічого не вийшло. Поле для введення виходить високим, а проблема виявилася в тому, що в Opera текс в поле не по середині, а притискається до верху, в інших браузерах по середині, через свою недосвідченість, плюнув на все і просто поклав input поверх div (з малюнком) У)
І добре, що ви самостійно, застосувавши інший підхід, змогли добитися бажаного результату. Справа в тому, що певна задача в верстці може мати кілька правильних рішень і, кожне з них, буде володіти своїми плюсами і мінусами. Якщо написаний код відповідає стандартам, має логічну структуру, то можна вважати, що завдання виконане правильно.
Так, хочу додати - якщо пользуете XHTML - поміняти в JS частини все великі символи на маленькі - інакше валібацію не пройде.
-----------
Uppercase letters in XHTML tags
In XHTML, unlike HTML, element and attribute names must be all lowercase. For example, onMouseOver is an invalid attribute in XHTML, which requires use of onmouseover instead. Either is fine in HTML.
А як ви робите рядок для коду?
Ось як цю:
1 .button: hover 2 background-position: 0 -56px;
3 padding-top: 4px;
4>
Дякуємо. Дуже корисно. Особливо в частині відправки форми myform.submit (); (Я її використовувала для відправки даних з input (type = "button»), тому що використовувати type = "submit" не представлялося можливим).
Я веб-майстер і викладач. Мене цікавить технічна сторона інтернет-бізнесу.
Люблю вивчати різні технічні аспекти, розбиратися як це влаштовано і розповідати іншим.
Живу в м Москва, Росія.
Живу в м Маріуполь, Україна.
Живу в м.Львові, Україна.