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

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

Перший варіант вимагає від вас підготувати два зображення стрілки - з підсвічуванням і без. Збережіть їх у файли з іменами, наприклад, arrON.jpg і arrOFF.jpg відповідно. Опис стилю посилання, яка буде відображатися в сторінці як стрілка, можна сформулювати такими інструкціями CSS-коду: У першому блоці задані розміри стрілки (height: 30px; width: 100px;) - замініть їх на розміри підготовлених зображень стрілки.

Другий варіант дозволяє обійтися тільки одним файлом з картинкою. Вам треба помістити в нього обидва зображення стрілки - і підсвічується, і неактивній. Можна розмістити їх поруч, можна одну над іншою. У зразку коду будемо вважати, що підсвічена стрілка поміщена під неактивною, а файл вами названий arr.jpg. Ця картинка, як і в попередньому варіанті, використовується в якості фону для посилання. Оскільки розміри об`єкта вказані в описі стилю, то весь залишок фону (стрілка підсвічена) не вміщається в них буде не видно веб-серфера. В описі псевдостилями hover заданий зсув в позиціонуванні фонової картинки, тому при наведенні курсору на посилання стане видно іншу ділянку і тепер стрілка пасивна виявиться «за кадром» .Тут теж не забудьте поміняти розміри.