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



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

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

Обновлено 26 декабря 2013 - 13:15  Отправлено 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
  • Модератор
  • 1 472 сообщений
  • Репутация: 282

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

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



Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 22.5 3 темы, 6 сообщений, 1 балл репутации

  • Фотография kuztoday
    #2

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография mkreine
    #3

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография kolver
    #4

    kolver
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #5

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 7.5 Вне конкурса за определение пользователя месяца

  • Фотография Totti
    #7

    Totti
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография Zevss
    #8

    Zevss (domles43.ru)
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Фотография wp01
    #9

    wp01
    Очков активности: 6 0 тем, 4 сообщения, 1 балл репутации

  • Фотография r0mZet
    #10

    r0mZet (rz-style.ru)
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

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