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



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

#1

Поделиться сообщением #1



r0mZet

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

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

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

 

 

  • 0

Копирую любой Landing Page. Сходство 100%, рабочие JS и РНР-формы. 



robot

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

#2

Поделиться сообщением #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

Поделиться сообщением #3



r0mZet

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

Отправлено 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

Копирую любой Landing Page. Сходство 100%, рабочие JS и РНР-формы. 



#4

Поделиться сообщением #4



Игорян

Игорян
  • Неактивные
  • 296 сообщений
  • Репутация: 10

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

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

#5

Поделиться сообщением #5



Ixman

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

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

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


#6

Поделиться сообщением #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