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

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

Зазвичай графічно оформлені стрілки на веб-сайтах використовують для організації навігації. При натисканні такого вказівника здійснюється перехід на іншу сторінку або в іншу секцію поточної сторінки. Іноді до них прив’язані будь-які дії — виділення вмісту такстового поля, запуск JavaScript-сценарію і т.д. Щоб підкреслити, що ця стрілка — активний елемент, використовують ефект «підсвічування», тобто зміни зовнішнього вигляду при наведенні курсору миші.

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

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

Інструкція

  1. Визначте, який механізм реалізації підсвічування стрілок вам більше підходить. Їх існує декілька, два простих наведені в наступних кроках цієї інструкції. Обидва вони використовують псевдокласс hover мови опису стилів CSS. Коли курсор миші знаходиться над графічним елементом (стрілкою), до неї застосовується стиль, описаний в цьому псевдокласи, а весь інший час цей стиль не активний.

    Для обох описаних нижче варіантів можна використовувати однаковий код HTML, але різний опис стилів. Код стрілки в исходник сторінки можна записати так:

    <a href=»#» id=»arrowA»> </ a>

    В атрибуті id вказано ідентифікатор посилання (arrowA), за яким браузер визначить, яка з стильових описів слід до неї застосовувати.
  2. Перший варіант вимагає від вас підготувати два зображення стрілки — з підсвічуванням і без. Збережіть їх у файли з іменами, наприклад, arrON.gif і arrOFF.gif відповідно. Опис стилю посилання, яка буде відображатися на сторінці як стрілка, можна сформулювати такими інструкціями CSS-коду:

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

     a # arrowA, a # arrowA: visited {

      display: block;

      height: 30px;

      width: 100px;

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

      border: 0;

     }

     a # arrowA: hover {

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

      border: 0;

     }

    </ Style>

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

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

    a # arrowA, a # arrowA: visited {

      display: block;

      width: 100px;

      height: 30px;

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

      border: 0;

     }

     a # arrowA: hover {

      background: url (arr.gif) no-repeat 31px;

      border: 0;

     }

     </ Style>

    Тут теж не забудьте поміняти розміри.