Перейти к содержимому



Как сделать анимирование графической ссылки при наведении курсора?

#1 r0mZet

r0mZet
  • Модератор
  • 966 сообщений
  • Репутация: 107
0

Отправлено 14 Декабрь 2013 - 21:00

Скажите пожалуйста. А как можно при помощи JavaScript сделать так чтобы при наведении курсора мыши на ссылку (в данном случае ссылкой является картинка), та изменилась на другую картинку.
Проще говоря есть меню навигации состоящее не из текста , а из графики, и нужно чтобы то либо подсвечивалось, либо менялось на другую картинку. Вообщем как-то так. Извиняюсь что криво объяснил :)

 

 

  • 0

#2 Игорян

Игорян
  • Пользователь
  • 296 сообщений
  • Репутация: 10

Отправлено 14 Декабрь 2013 - 22:14

Если я правильно вас понял, то подобные штуки делаются на css

.www {
  width:42px;
  height:42px;
  float:left;
  background: url('../image/www.png') no-repeat;
}

.www:hover {
  background: url('../image/www.png') no-repeat -42px;
}

Изображение

картинка www.png 42 на 42пх при наведении курсора мыши сдвигается влево на -42пх. Как то так...
  • 0

#3 r0mZet

r0mZet
    Topic Starter
  • Модератор
  • 966 сообщений
  • Репутация: 107

Отправлено 14 Декабрь 2013 - 23:14

Игорян, Не не, это я так понял смещение картинки

Вообщем подсказали мне рабочий варик, может кому тоже пригодится.

в index.html пишем:
<a href='page1.html' class='images'></a>
в style.css пишем:
a.images {
background: url("pic1.png");
display: block;
width: 400px;
height: 200px;
}
a.images:hover {
background: url("pic2.png");
}

  • 0

#4 Игорян

Игорян
  • Пользователь
  • 296 сообщений
  • Репутация: 10

Отправлено 15 Декабрь 2013 - 09:46

если картинка pic2.png будет тяжелая, то при наведении курсора мыши она отобразится не сразу. В моем же примере картинка загрузится вся и сразу и такого глюка не будет. :)
  • 0

#5 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 15 Декабрь 2013 - 14:56

Да и использование спрайтов ускоряет загрузку страницы, что приветствуется ПС
  • 0

#6 wmas

wmas
  • Пользователь
  • 22 сообщений
  • Репутация: 4

Отправлено 26 Декабрь 2013 - 13:15

Оптимальный вариант со смещением фоновой картинки, состоящей из двух картинок, но если ставится условие наличие картинки в HTML-коде, то можно так:
<html>
<head>
<style>
.button1 { display:block; background: url('http://ru.lookatcode.com/show/9760354621051416/button_hover.png') no-repeat; }
.button1:hover img {visibility:hidden;}
</style>
</head>
<body>
<a class="button1" href="#"><img alt="" src="http://ru.lookatcode.com/show/11574013351813317/button_static.png"></a>
</body>

  • 0


Оформление форума – IPBSkins.ru