Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Обо всём » Собираем скрипты » Картинка меняется при наведении на нее курсора мыши (Смена одной картинки на другую при наведении на неё курсора)
Картинка меняется при наведении на нее курсора мыши
artnovДата: Воскресенье, 06.04.2014, 20:31 | Сообщение # 1
Начальник сайта
Группа: Администраторы
Сообщений: 149
Награды: 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>
 


 Ссылка на публикацию
 
html-cсылка на публикацию
BB-cсылка на публикацию


Artnov
 
artnovДата: Понедельник, 07.04.2014, 15:04 | Сообщение # 2
Начальник сайта
Группа: Администраторы
Сообщений: 149
Награды: 0
Репутация: 0
Статус: Offline

Код
<div onmouseover="document.getElementById('yux3').src='http://www.novickiy.ru/798/18872083011.jpg';"
      onmouseout="document.getElementById('yux3').src='http://www.novickiy.ru/798/cvecve.jpg';">
         
      <img id=yux3 src="http://www.novickiy.ru/798/18872083011.jpg">
         
      </div>
Проверить в редакторе
 


 Ссылка на публикацию
 
html-cсылка на публикацию
BB-cсылка на публикацию


Artnov
 
Форум » Обо всём » Собираем скрипты » Картинка меняется при наведении на нее курсора мыши (Смена одной картинки на другую при наведении на неё курсора)
Страница 1 из 11
Поиск:
ВСЕОБЩАЯ ДЕКЛАРАЦИЯ прав человека
Эжен де Блаас
Слайд шоу (Натюрморты)
Леонардо да Винчи

Яндекс цитирования купить картину маслом Arts.In.UA