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

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

Підсвічування кнопок у веб-сторінках організується, як правило, з використанням двох зображень. При наведенні курсору миші на відповідний елемент документа (посилання або кнопку) генерується подія, яка відповідно до записаними на мові CSS інструкціями, спонукає браузер поміняти одну картинку на іншу. Коли курсор миші відводять від кнопки, відбувається зворотна заміна.

Вам знадобиться

Базові знання мов HTML і CSS

Інструкція

  1. Існує кілька варіантів реалізувати такий механізм підсвічування. При будь-якому з них можна використовувати один і той же HTML-код, змінюючи лише відповідне йому стильове опис. Код кнопки на мові HTML може виглядати, наприклад, так:

    <a href=»#» id=»btnA»> текст на кнопці </ a>

    Тут вказано ідентифікатор цього елементу сторінки (id = «btnA») до якого буде прив’язана опис стилю.
  2. Для реалізації одного з варіантів вам потрібно заготовити дві картинки, на одній з яких зображена кнопка в неактивному стані, а на другий — з підсвічуванням. Вони будуть використовуватися як фонове зображення посилання. Інструкції CSS, пов’язані з цієї кнопці, можуть виглядати так:

    <style type=»text/css» media=»all»>

     a # btnA, a # btnA: visited {

      display: block;

      width: 50px;

      height: 20px;

      background: url (btnA.gif) no-repeat;

      border: 0;

     }

     a # btnA: hover {

      background: url (btnA_hover.gif) no-repeat;

      border: 0;

     }

    </ Style>

    Тут у першому блоці вказані розміри картинки, що зображає кнопку (width: 50px; height: 20px;). Вам треба замінити їх розмірами своєї картинки. Аналогічно слід поміняти імена файлів картинок: btnA.gif — це кнопка без підсвічування, btnA_hover.gif — з підсвічуванням.
  3. Один з альтернативних варіантів — помістити обидва зображення в одну картинку. Можна одну над іншою, а можна поруч. Вона також буде використовуватися як фон для посилання. Оскільки розміри кнопки задані в описі стилю кнопки, то все, що не вміщається в них, не буде видно. У цьому випадку інструкції, поміщені в CSS-опис повинні при наведенні курсору миші прокручувати фонову картинку таким чином, щоб «в кадр» потрапляв ділянку з зображенням підсвічується кнопки. Для цього варіанту код з попереднього кроку треба змінити таким чином:

    <style type=»text/css» media=»all»>

     a # btnA, a # btnA: visited {

      display: block;

      width: 50px;

      height: 20px;

      background: url (btnA.gif) no-repeat;

      border: 0;

     }

     a # btnA: hover {

      background: url (btnA.gif) no-repeat 21px;

      border: 0;

     }

    </ Style>

    Тут передбачається, що ви розмістили зображення одне над іншим (підсвічене — знизу) і зберегли у файл з ім’ям btnA.gif. Висота кнопок 20px, ширина 50px — ці значення вам треба замінити своїми.