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

Зазвичай графічно оформлені стрілки на веб-сайтах використовують для організації навігації. При натисканні такого покажчика здійснюється перехід на іншу сторінку або в іншу секцію поточної сторінки. Іноді до них прив'язані які-небудь дії - виділення вмісту такстового поля, запуск JavaScript-сценарію і т.д. Щоб підкреслити, що ця стрілка - активний елемент, використовують ефект «підсвічування», тобто зміни зовнішнього вигляду при наведенні курсору миші.
Вам знадобиться
  • Базові знання мов HTML і CSS
Інструкція
1
Визначте, який механізм реалізації підсвічування стрілок вам більше підходить. Їх існує декілька, два простих приведені в подальших кроках цієї інструкції. Обидва вони використовують псевдокласс hover мови опису стилів CSS. Коли курсор миші знаходиться над графічним елементом (стрілкою), до неї застосовується стиль, описаний в цьому псевдокласів, а весь інший час цей стиль не актівен.Для обох описаних нижче варіантів можна використовувати однаковий код HTML, але різне опис стилів. Код стрілки в исходник сторінки можна записати так: В атрибуті id вказано ідентифікатор посилання (arrowA), за яким браузер визначить, яке з стильових описів слід до неї застосовувати.
2
Перший варіант зажадає від вас підготувати два зображення стрілки - з підсвічуванням і без. Збережіть їх у файли з іменами, наприклад, arrON.gif"і arrOFF.gif"відповідно. Опис стилю посилання, яка буде відображатися в сторінці як стрілка, можна сформулювати такими інструкціями CSS-коду: В першому блоці задані розміри стрілки (height: 30px; width: 100px;) - замініть їх на розміри підготовлених зображень стрілки.
3
Другий варіант дозволяє обійтися тільки одним файлом з картинкою. Вам треба помістити в нього обидва зображення стрілки - і підсвіченої, і неактивною. Можна розмістити їх поруч, можна одну над іншою. У зразку коду будемо вважати, що підсвічена стрілка поміщена під неактивною, а файл вами названий arr.gif". Ця картинка, як і в попередньому варіанті, використовується в якості фону для посилання. Оскільки розміри об'єкта вказані в описі стилю, то весь залишок фону (стрілка підсвічена) не вміщається до них буде не видно веб-серферу. В описі псевдостилями hover заданий зсув в позиціонуванні фонової картинки, тому при наведенні курсору на посилання стане видно інший ділянку і тепер стрілка пасивна виявиться «за кадром».