Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

Код:

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, 18:12   #2
Serge_Bliznykov
МегаМодератор
СуперМодератор
 
Регистрация: 09.01.2008
Сообщений: 24,489
Репутация: 5308
По умолчанию

ну, ваш первый вариант легко заменить на
Код:

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 в 18:21.
Serge_Bliznykov вне форума   Ответить с цитированием
Старый 10.05.2018, 18:31   #3
Serge_Bliznykov
МегаМодератор
СуперМодератор
 
Регистрация: 09.01.2008
Сообщений: 24,489
Репутация: 5308
По умолчанию

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

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

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

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавное появление картинки( Timage) на форму Коккс Мультимедиа в Delphi 12 08.10.2017 15:09
Плавное появление картинки sorokolit Общие вопросы Delphi 1 22.01.2015 18: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


00:44.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru