Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 10.05.2018, 12:39   #1
Lord_Jesus_
Форумчанин
 
Регистрация: 23.09.2016
Сообщений: 169
По умолчанию Плавное появление картинки при наведении на ссылку

Код:
var imgs = new Array("img1.png", "img2.png", "img3.png");
function sh_img(a) {
 
 
    var obj = document.getElementById("img");
        obj.src = imgs[a];
 
 
  }

Код:

<nav>
    <a href="ссылка.php"  onMouseOver="sh_img(1)" onMouseOut="sh_img(0);">текст</a>
        <a href="ссылка2.php"  onMouseOver="sh_img(2)" onMouseOut="sh_img(0);">текст2</a>
    
  </nav>
  <div>
  <img src=""img1.png" id="img">
  </div>
При наведении на ссылку появляется изображение соответствующей ссылки, если вне диапазона ссылки то используеться картинка по умолчанию
Подскажите пожалуйста как теперь сделать чтобы изображение менялось плавно...

Пробовал сделать так...


Код:
var imgs = new Array("img1.png", "img2.png", "img3.png");
function sh_img(a) {
 
       $('#img').animate({'opacity': 0}, 500).hide();
    var obj = document.getElementById("img");
        obj.src = imgs[a];
 
       $('#img').show().animate({'opacity': 1}, 500);
  }
это конечно неправильно,и работает не корректно и говорит о том что у меня нехватка знаний, подскажите пожалуйста как нужно правильно все это реализовать,,,
Lord_Jesus_ вне форума Ответить с цитированием
Старый 10.05.2018, 17:12   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

ну, ваш первый вариант легко заменить на
Код:
function sh_img(a) { $('#img').attr('src',imgs[a]);  }

а что касается
Цитата:
Сообщение от Lord_Jesus_ Посмотреть сообщение
Плавное появление картинки при наведении на ссылку
попробуйте такой код:
Код:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script language="JavaScript">
var imgs = new Array("1.png", "2.png", "3.png");
var curImage = 0;
function sh_img(a) {
  curImage = a; 
  $('#img').fadeOut(300, function() { 
  	$(this).attr('src',imgs[curImage]).fadeIn(300);
  });
}
</script>
</head>
<body>

<nav>
    <a href="ссылка.php"  onMouseOver="sh_img(1)" onMouseOut="sh_img(0);">текст1</a>
    <a href="ссылка2.php"  onMouseOver="sh_img(2)" onMouseOut="sh_img(0);">текст2</a>
    
</nav>
<div>
<img src="1.png" id="img">
</div>
</body>
p.s. и вообще, если уж используете jQuery, то вместо нативных onMouseOver/Out лучше использовать метод .hover()

Последний раз редактировалось Serge_Bliznykov; 10.05.2018 в 17:21.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 10.05.2018, 17:31   #3
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

а вообще, посмотрите, может быть, Вам вообще программа не нужна.

вот всё, что Вам нужно, сделано на CSS

пример в песочнице - https://jsfiddle.net/ngbxwt7r/

код взят со стековерфлоу: Как реализовать замену фона родительского блока по наведению курсора на ссылку?
Serge_Bliznykov вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавное появление картинки( Timage) на форму Коккс Мультимедиа в Delphi 12 08.10.2017 14:09
Плавное появление картинки sorokolit Общие вопросы Delphi 1 22.01.2015 17:04
Плавное появление блока при наведении курсором на ссылку danilkins JavaScript, Ajax 5 02.12.2013 16:45
появление изображения при наведении moneyman HTML и CSS 8 21.06.2012 14:58
Плавное появление картинки при наведении мыши на ссылку CodeNOT JavaScript, Ajax 7 28.04.2011 17:15