[ [ Новые сообщения ] · [ Поиск ] · [ RSS ] [ Вы не выполнили Вход ]]
  • Страница 1 из 1
  • 1
Замена одной картинки на другую при наведении
smile_61Дата: Воскресенье, 05.09.2010, 17:35 | Сообщение # 1
Управляющий
Группа: Проверенные
Сообщений: 4157
Награды: 22
Репутация: 61
Статус:
Замена одной картинки на другую при наведении

Зачастую подобные вещи нужны при создании меню

пример данной работы можно посмотреть ЗДЕСЬ

этот код вставляем между тегами head

Code

<style type="text/css">
A.rollover {
background: url('http://bormoney.ru/imghost/menu_button.png'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 228px; /* Ширина рисунка в пикселах */
height: 48px; /* Высота рисунка */
margin-top:5px;
}

A.rollover:hover {
background-position:
0px /* Смещение по горизонтали */
-48px; /* Смещение вверх по вертикали */
}
</style>

ну и соответственно сама ссылка:

Code

<a href="http://bormoney.ru/forum/59" class="rollover"></a>
 
smile_61Дата: Воскресенье, 05.09.2010, 17:49 | Сообщение # 2
Управляющий
Группа: Проверенные
Сообщений: 4157
Награды: 22
Репутация: 61
Статус:
Второй вариант

Code

<style type="text/css">
A.rollover {
background: url('http://bormoney.ru/imghost/sun.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
border: 1px solid #000; /* Рамка вокруг картинки */  
}

A.rollover:hover {
background: url('http://bormoney.ru/imghost/sun2.gif'); /* Путь к файлу с заменяемым рисунком */
}
</style>
 
  • Страница 1 из 1
  • 1
Поиск: