Зазвичай графічно оформлені стрілки на веб-сайтах використовують для організації навігації. При натисканні такого індексу можна перейти на іншу сторінку або в іншу секцію поточної сторінки. Іноді до них прив 'язані будь-які дії - виділення вмісту такстового поля, запуск JavaScript-сценарію тощо. Щоб підкреслити, що ця стрілка - активний елемент, використовують ефект "підсвічування", тобто зміни зовнішнього вигляду при наведенні курсора миші.
Вам знадобиться
- Базові знання мов HTML і CSS
Інструкція
підсвічуваннястрілок1. Визначте, який механізм реалізації вам більше підходить. Їх існує кілька, два простих наведені в наступних кроках цієї інструкції. Обидва вони використовують псевдоклас hover мови опису стилів CSS. Коли курсор миші знаходиться над графікою (стрілкою), до неї застосовується стиль, описаний у цьому псевдокласі, а весь інший час цей стиль не активний. Для обох описаних нижче варіантів можна використовувати однаковий код HTML, але різний опис стилів. Код стрілки у вихідник сторінки можна записати так:< а href = "" # "" id = "" arrowA "" > </a > B атрибуті 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 > B першому блоці вказано розміри стрілки (height: 30px; width: 100px;) - замініть їх на розміри підготовлених зображень стрілки.
3. Другий варіант дозволяє обійтися тільки одним файлом з картинкою. Вам треба помістити в нього обидва зображення стрілки - і підсвіченої, і неактивної. Можна розмістити їх поруч, можна одну над іншою. У зразку коду будемо вважати, що підсвічена стрілка поміщена під неактивною, а файл вами названий arr.gif. Ця картинка, як і в попередньому варіанті, використовується як фон для посилання. Оскільки розміри об 'єкта вказані в описі стилю, весь залишок фону (стрілка підсвічена) не буде показано веб-серферу. В описі псевдостиля hover вказано зсув у позиціонуванні фонової картинки, тому при наведенні курсора на посилання стане видно іншу ділянку і тепер стрілка пасивна виявиться "за кадром". < style type = "" text/css "" media = "" all "" > 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 > Не забудьте змінити розміри.