Як зробити підсвічування кнопок. html кнопка з підсвічуванням.

Підсвічування кнопок в веб-сторінках організується, як правило, з використанням двох зображень. При наведенні курсору миші на відповідний елемент документа (посилання або кнопку) генерується подія, яка відповідно до записаними на мові CSS інструкціями, спонукає браузер поміняти одну картинку на іншу. Коли курсор мишки відводять від кнопки, відбувається зворотна заміна.
Вам знадобиться
  • Базові знання мов HTML і CSS
Інструкція
1
Існує декілька варіантів реалізувати такий механізм підсвічування. При будь-якому з них можна використовувати один і той же HTML-код, змінюючи лише відповідне йому стильове опис. Код кнопки на мові HTML може виглядати, наприклад, так: текст на кнопці Тут вказано ідентифікатор цього елементу сторінки (id="btnA") до якого буде прив'язано опис стилю.
2
Для реалізації одного з варіантів вам потрібно заготовити дві картинки, на одній з яких зображена кнопка в неактивному стані, а на другий - з підсвічуванням. Вони використовуватимуться як фонове зображення посилання. Інструкції CSS, які стосуються цій кнопці, можуть виглядати так: Тут у першому блоці вказані розміри картинки, яка зображує кнопку (width: 50px; height: 20px;). Вам треба замінити їх розмірами своєї картинки. Аналогічно слід поміняти імена файлів картинок: btnA.gif"- це кнопка без підсвічування, btnA_hover.gif"- з підсвічуванням.
3
Один з альтернативних варіантів - помістити обидва зображення в одну картинку. Можна одну над іншою, а можна поруч. Вона також буде використовуватися як фон для посилання. Оскільки розміри кнопки задані в описі стилю кнопки, то все, що не вміщається в них, не буде видно. В цьому випадку інструкції, поміщені в CSS-опис повинні при наведенні курсору миші прокручувати фонову картинку таким чином, щоб «в кадр» потрапляв ділянку із зображенням підсвіченої кнопки. Для цього варіанту код з попереднього кроку треба змінити таким чином: Тут передбачається, що ви розмістили зображення одне над іншим (підсвічене - знизу) і зберегли у файл з ім'ям btnA.gif". Висота кнопок 20px, ширина 50px - ці значення вам треба замінити своїми.
Підсвічування клавіатури існує лише на деяких моделях ноутбуків. Поза всяким сумнівом, це дуже зручна опція, що дозволяє з комфортом працювати навіть у повній темряві. При наявності підсвічування необхідно знати, як його ввімкнути.
Інструкція
1
Підсвічування клавіатури включається при натисканні клавіші Fn і однією з додаткових клавіш. Яку саме клавішу включати - залежить від моделі ноутбука.
2
У багатьох випадках необхідну комбінацію клавіш можна визначити візуально, так як на додаткових клавішах (використовується ряд F1-F12) виробники наносять додаткові символи. Колір цих символів такий же, як і напис на клавіші Fn. Поекспериментуйте, натискаючи разом з Fn клавіші з додатковими символами. Шукайте малюнок з символом підсвіченої клавіатури.
3
Врахуйте, що при натисканні клавіш ви можете задіяти й інші опції - вимкнення екрану, вхід в сплячий режим і т.д. Щоб скасувати зміни, натисніть ту ж комбінацію клавіш ще раз.
4
Якщо малюнки на клавішах не дозволили виявити потрібну комбінацію, при цьому ви точно знаєте, що підсвічування клавіатури на вашому ноутбуці є, спробуйте наступні комбінації: - Fn + F6 або Fn + стрілка вправо; - Fn + SPACE (пробіл) ; - Fn + F5.
5
В тому випадку, якщо на вашому ноутбуці підсвічування клавіатури немає, можна самостійно зробити зовнішнє підсвічування, використовуючи харчування +5 В від USB-роз'єму і один або декілька світлодіодів білого світіння. В роз'ємі вам потрібні два крайніх контакту (лівий і правий). Напруга живлення білого світлодіода одно 3,5 В. Значить, необхідний резистор, на якому будуть гаситися зайві 1,5 В. Струм світлодіода 20 мА, або 0,02 А. Тоді опір додаткового резистора буде 1,5 В/0,02 = 75 Ом.
6
Якщо яскравості одного світлодіода недостатньо, підключіть паралельно ще один з таким же резистором. Обов'язково проконтролюйте споживаний світлодіодами струм, так як його відмінність від 18-20 мA негативно позначається на терміні служби світлодіода. Потрібний струм встановлюйте підбором резистора. USB-роз'єм здатний віддати до 0,5 А - це означає, що від нього можна живити до 25 світлодіодів.
Відео по темі
 http://www.youtube.com/watch?v=3v4B_3kfF0c
Корисна порада
На деяких ноутбуках є виділена клавіша включення підсвічування, вона може перебувати у верхньому лівому куті клавіатури.