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


Партнерская программа Expressrxsales

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

#1 r0mZet

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

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

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

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Увеличение фото при наведении курсора.
  2. При наведении на ссылку-рисунок выводится рaмка
  3. Убрать подсказку, всплывающую при наведении на ссылки категорий WordPress!
  4. Как сделать, чтобы при наведении курсора линии подсвечивались
  5. Анимация строки навигации

#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
  • Модератор
  • 1 018 сообщений
  • Репутация: 127

Отправлено 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 306 сообщений
  • Репутация: 506

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

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

Не раздумывай - иди к нам! Фарма ПП Skype: cristina.rx2, ICQ: 676017111, Jabber: cristina.rx@jabb3r.org



#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