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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

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

    WGN (worldgamenews.com)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

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

    Ixman (o5cat.ru)
    Очков активности: 72 0 тем, 8 сообщений, 6 баллов репутации

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

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

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

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

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

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

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

    Developer
    Очков активности: 31.5 2 темы, 15 сообщений, 1 балл репутации

  • Фотография Алексей111
    #8

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

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

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

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

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

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

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 22.09.2018
Топ 5 участников по репутации


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

#1 r0mZet

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

Отправлено 14 December 2013 - 21:00

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

 

 

  • 0


#2 Игорян

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

Отправлено 14 December 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
  • Модератор
  • 1231 сообщений
  • Репутация: 209

Отправлено 14 December 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 December 2013 - 09:46

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

#5 Ixman

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

Отправлено 15 December 2013 - 14:56

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


#6 wmas

wmas
  • Неактивные
  • 22 сообщений
  • Репутация: 4

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