Главная Аккаунт Файлы Ссылки Форум Графика
Разделы

Главное меню

Фоны текстуры



Раздел:
 Microsoft Silverlight
Это новая технология Microsoft для создания веб сайтов. Некое подобие Flash -технологии.
 Начинающему веб-мастеру
 Коды CSS и HTML
Готовые коды для вставки на страницу
 Работа с графикой
Создание, изменение и оптимизация веб графики
 Технология Flash
Создание графики и анимации
 Раскрутка, продвижение сайта или СЕО
Продвижение, увеличение посещаемости и раскрутка сайтов
 Скрипты для Flash (ActionScrit 2)
Никаких уроков, только коды (скрипты)
 Blender (3d графика)
Информация по программе Blender
 Программы для графики и анимации
 Статьи по веб дизайну
 Статьи по CSS и HTML
Различная информация по CSS и HTML
 Как заработать на сайте
Разные способы монетизации сайта или форума
 Скрипты JavaScript
Коды скриптов JavaScript для вставки в страницу сайта

  

7.11.07 10:39 | Ролловер (перекат) или смена картинки при наведении курсора
Раздел: Коды CSS и HTML | Автор: upet | Рейтинг: 5.50 (4) Оценить | Хитов 21934
Делается всё очень просто. Делаем 2 изображения кнопки с одинаковыми размерами (например, 40х20 пикселей). Одинаковые размеры нужны для того, чтобы при наведении курсора кнопка не прыгала.

Первое изображение неактивной кнопки,
Второе при наведении на неё курсора .

Вообще кнопки можно сделать абсолютно любые.

Оптимизируем их под Веб и загружаем в корневую папку сайта (обычно эта папка называется images).

Теперь пишем код



a.knopka {                                           /*выделенное красным можно заменить на любое своё название*/
display:block;
background-image: url(images/top.gif);                             /*выделенное синим меняете на свой адрес картинки*/
width:200px;
height:40px;
}
a.knopka:hover {                                       /*hover вот это и есть то самое наведение*/
display:block;
background-image: url(images/bottom.gif);
width:200px;
height:40px;
}


 Этот код вносим в файл с CSS или в голову страницы между  <head></head>
 
Теперь переходим к html странице.
Выбираем место, где будем размещать изображение. Возьмём, к примеру ссылку:

<a href=”” class=”knopka">здесь любой текст</a>

Т.е. чтобы вызвать уже описанные нами свойства применяем class=""
 



MyArticles 0.6 beta for RUNCMS: by RunCms.ru


Можно и сюда


Cчётчики
Rambler's Top100 Рейтинг@Mail.ru