Підсвічування кнопок у веб-сторінках організовується, як правило, з використанням двох зображень. При наведенні курсора миші на відповідний елемент документа (посилання або кнопку) генерується подія, яка відповідно до записаних мовою CSS інструкціями, спонукає браузер поміняти одну картинку на іншу. Коли курсор мишки відводить від кнопки, відбувається зворотна заміна.
Вам знадобиться
- Базові знання мов HTML і CSS
Інструкція
1. Існує кілька варіантів реалізувати такий механізм підсвічування. При будь-якому з них можна використовувати один і той же HTML-код, змінюючи лише відповідний йому стилевий опис. Код кнопки мовою HTML може виглядати, наприклад, так:< а href = "" # "" id = "" btnA "" > текст на кнопці </а > Тут вказано ідентифікатор цього елемента сторінки (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 - ці значення вам треба замінити своїми.