Картинка меняется при наведении на нее курсора мыши

[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Картинка меняется при наведении на нее курсора мыши (Смена одной картинки на другую при наведении на неё курсора)

Картинка меняется при наведении на нее курсора мыши

artnov

Дата: Воскресенье, 06.04.2014, 20:31 | Сообщение # 1

Начальник сайта

Группа: Администраторы

Сообщений: 151

Награды: 0

Репутация: 0

Статус: Offline

Смена одной картинки на другую при наведении на неё курсора мыши. Обычно для создания эффекта применяется JavaScript, но достаточно и CSS.

Код

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8">
    <title>Эффект перекатывания</title>
    <style>
     a.rollover {
      background: url(http://artnov-kartina.ru/wp-content/uploads/2014/03/Span.jpg); /* Путь к файлу с исходным рисунком  */
      display: block; /*  Рисунок как блочный элемент */
      width: 280px; /* Ширина рисунка */
      height: 280px; /*  Высота рисунка */
     }
     a.rollover:hover {
      background: url(http://artnov-kartina.ru/wp-content/uploads/2014/03/Kana.jpg); /* Путь к файлу с заменяемым рисунком  */
     }
    </style>
   </head>
   <body>
    <p><a href="http://www.novickiy.ru/photo" target="_blank"  class="rollover"> </a></p>
    </body>
</html>

Эффект с одним рисунком;

Код

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>Эффект перекатывания</title>
   <style>
    a.rollover {
     background: url(http://www.novickiy.ru/797/russ.png); /* Путь к файлу с исходным  рисунком */
     display: block; /* Рисунок как блочный элемент */
     width: 151px; /* Ширина рисунка в пикселах */
     height: 40px; /* Высота рисунка */
    }
    a.rollover:hover {
     background-position: 0 -40px; /* Смещение фона */
    }
   </style>
  </head>
   <body>
   <p><a href="link.html" class="rollover"></a></p>

Artnov