Плавная смена картинок - как?

Ответить
Anunja
Сообщения: 2
Зарегистрирован: 21.07.2010
Есть скрипт

Код: Выделить всё

<html>
<head>
   <title>Мгновенная смена картинки при наведении курсора на ссылку</title>
   <script>
      function not(){
         document.img1.src="../banner/gold468x60.gif"
      }	
      function imgOn(imgName) {
         if (document.images) {
            document.img1.src = imgName;        
         }
      }
   </script>
</head>
<body bgcolor="000000" text="#00ff99" link="#00ff00" alink="#99ff00" vlink="#00cc00">
   <table>
      <tr>
         <td>
            <a href="javascript:not()" onmouseover="imgOn('../banner/gold468x60.gif')">img 1</a><br>
            <a href="javascript:not()" onmouseover="imgOn('../banner/metal468x60.gif')">img 2</a><br>
            <a href="javascript:not()" onmouseover="imgOn(' ../banner/metal-468x60.gif')">img 3</a>
         </td>
         <td>  
            <img src="../banner/gold468x60.gif" width="468" height="60" alt="" border="0" name="img1">
         </td>
      </tr>
   </table>
</body>
</html>
вот он в примере scriptic.narod.ru/show/smena.htm
При помощи этого скрипта я сделала меню - вверху список художников, под ним большая картина, которая меняется соответственно художнику, на которого наведена мышка. Но смена изображения происходит очень быстро и получается некрасиво. А можно ли добавить плавности? Или лучше использовать другой способ? (В яваскрипте я не сильна)
Вернуться к началу
Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
На чистом JavaScript сделать это кроссбраузерно будет довольно сложно, но можно например сделать с использованием jQuery:

Код: Выделить всё

<html>
<head>
   <title>Мгновенная смена картинки при наведении курсора на ссылку</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
		$(document).ready(function() {
			$('.img1_link').mouseenter(function(){ imgOn($(this).attr('pic'))}).click(function(){return false;});
		});
		var speed = 500;
		var timer = false;
		function imgOn(imgName) {
			$('#img1').fadeOut(speed);
			clearInterval(timer);
			timer = setInterval(function(){$('#img1').attr('src',imgName).fadeIn(speed)},speed);
		}
   </script>
</head>
<body bgcolor="000000" text="#00ff99" link="#00ff00" alink="#99ff00" vlink="#00cc00">
   <table>
      <tr>
         <td>
            <a class="img1_link" href="#" pic="../banner/gold468x60.gif">img 1</a><br>
            <a class="img1_link" href="#" pic="../banner/metal468x60.gif">img 2</a><br>
            <a class="img1_link" href="#" pic="../banner/metal-468x60.gif">img 3</a>
         </td>
         <td>  
            <img id="img1" src="../banner/gold468x60.gif" width="468" height="60" alt="" border="0">
         </td>
      </tr>
   </table>
</body>
</html>
Для всех ссылок которые должны менять картинку указывается путь к картинке (в атрибуте pic) и общий css класс "img1_link" (именно по этому классу отбираются ссылки, которым добавляется обработчики js-событий onmouseenter и onclick )

onmouseenter намеренно используется вместо приведенного вами onmouseover, т.к. в вашем случае смена будет срабатывать постоянно пока мышь двигается по ссылке, а нам надо чтобы картинка менялась при наведении на ссылку только один раз. Если требуется оставить возможность перейти по этим ссылкам, то следует убрать заглушку

Код: Выделить всё

.click(function() {return false;})
У картинки которая должна меняться задается id ( id="img1").

В общем то это все комментарии к коду, остается только сказать что можно настроить скорость смены картинок под себя изменяя значение переменной speed (время указывается в миллисекундах, т.е. значение 1000 соответствует 1 секунде)
Вернуться к началу
Anunja
Сообщения: 2
Зарегистрирован: 21.07.2010
Мне посоветовали сделать как здесь http://norse.ru/pub/184.html. Все получилось, только хотелось бы попробовать разные скорости.
Вернуться к началу
Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
Anunja писал(а):Мне посоветовали сделать как здесь http://norse.ru/pub/184.html. Все получилось, только хотелось бы попробовать разные скорости.
скорость смены картинок в твоем случае задается в строке

Код: Выделить всё

Timer_p = window.setInterval(function () { L_next(false); }, 7000);
7000 = 7 секунд


а вообще приведенный вариант смены картинок именуется слайдером. в сети есть огромное количесво бесплатных плагинов на jQuery реализующих этот эффект. Найти их можно например в гугле http://www.google.ru/search?q=jquery+image+slider или, если более конкретно, то например посмотреть в http://www.snilesh.com/resources/jquery ... ge-slider/ плагины под номерами 2, 4, 8
Вернуться к началу
dework
Сообщения: 5
Зарегистрирован: 26.10.2010
Скажите пожалуйста новичку, как сделать так, чтобы при ....при убирании курсора с ссылки картинка менялась на другую картинку, которая отвечает за открытую ссылку.. :kr:

Код: Выделить всё

<html>
<head>
   <title>Мгновенная смена картинки при наведении курсора на ссылку</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         $('.img1_link').mouseenter(function(){ imgOn($(this).attr('pic'))}).click(function(){return false;});
      });
      var speed = 500;
      var timer = false;
      function imgOn(imgName) {
         $('#img1').fadeOut(speed);
         clearInterval(timer);
         timer = setInterval(function(){$('#img1').attr('src',imgName).fadeIn(speed)},speed);
      }
   </script>
</head>
<body bgcolor="000000" text="#00ff99" link="#00ff00" alink="#99ff00" vlink="#00cc00">
   <table>
      <tr>
         <td>
            <a class="img1_link" href="#" pic="../banner/gold468x60.gif">img 1</a><br>
            <a class="img1_link" href="#" pic="../banner/metal468x60.gif">img 2</a><br>
            <a class="img1_link" href="#" pic="../banner/metal-468x60.gif">img 3</a>
         </td>
         <td>  
            <img id="img1" src="../banner/gold468x60.gif" width="468" height="60" alt="" border="0">
         </td>
      </tr>
   </table>
</body>
</html>
-- добавлено 26 окт 2010, 12:59 --

т.е. менялась как сделать возврат на основную картинку?
Вернуться к началу
Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
для этого надо добавить обработку по mouseleave

Код: Выделить всё

<html>
<head>
    <title>Мгновенная смена картинки при наведении курсора на ссылку</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var prev_img = $('#img1').attr('src');
        $('.img1_link').mouseenter(function(){ imgOn($(this).attr('pic'))}).mouseleave(function(){ imgOn(prev_img)}).click(function(){return false;});
    });
    var speed = 500;
    var timer = false;
    function imgOn(imgName) {
        $('#img1').fadeOut(speed);
        clearInterval(timer);
        timer = setInterval(function(){$('#img1').attr('src',imgName).fadeIn(speed)},speed);
    }
    </script>
</head>
<body bgcolor="000000" text="#00ff99" link="#00ff00" alink="#99ff00" vlink="#00cc00">
    <table>
        <tr>
            <td>
                <a class="img1_link" href="#" pic="../banner/gold468x60.gif">img 1</a><br>
                <a class="img1_link" href="#" pic="../banner/metal468x60.gif">img 2</a><br>
                <a class="img1_link" href="#" pic="../banner/metal-468x60.gif">img 3</a>
            </td>
            <td>
                <img id="img1" src="../banner/gold468x60.gif" width="468" height="60" alt="" border="0">
            </td>
        </tr>
    </table>
</body>
</html>
Вернуться к началу
dework
Сообщения: 5
Зарегистрирован: 26.10.2010
Большое спасибо :)
продолжу работу

-- добавлено 26 окт 2010, 21:21 --

Подскажите пожалуйста, как можно задавать большой пробел в тексте, не используя &nbsp;
Вернуться к началу
Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
используя отступы http://htmlbook.ru/css/padding или http://htmlbook.ru/css/margin в зависимости от ситуации.

вопросы не относящиеся к рассматриваемой теме старайтесь задавать в отдельных темах
Вернуться к началу
dework
Сообщения: 5
Зарегистрирован: 26.10.2010
:) еще раз спасибо
Вернуться к началу
Garyk
Сообщения: 3
Зарегистрирован: 02.02.2012
dework писал(а):Скажите пожалуйста новичку, как сделать так, чтобы при ....при убирании курсора с ссылки картинка менялась на другую картинку, которая отвечает за открытую ссылку.. :kr:

т.е. менялась как сделать возврат на основную картинку?

Очень прошу подсказать - как в этом коде добавить таймаут (задержку возврата) ну скажем на 2 сек (2000 мс) для основного (первого) изображения. Т.е. чтобы после отвода мышки основное изображение возвращалось не сразу, а с задержкой.
Уже два часа пытаюсь прописать setTimeout, но пока безуспешно :(

И второй вопрос - возможно ли прописать в коде блокировку повторной загрузки изображения? Т.е. сейчас так - если подвести мышку - картинка загрузилась, отвел мышку и тут же подвел - картинка повторно загрузилась. Не совсем красиво так. Как заблокировать такую ситуацию ?
Вернуться к началу
Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
Garyk писал(а):как в этом коде добавить таймаут (задержку возврата) ну скажем на 2 сек (2000 мс) для основного (первого) изображения

Код: Выделить всё

$('.img1_link').mouseenter(function(){ imgOn($(this).attr('pic'))}).mouseleave(function(){ imgOn(prev_img)}).click(function(){return false;});
заменить на

Код: Выделить всё

$('.img1_link')
        .mouseenter(function(){ imgOn($(this).attr('pic'))})
        .mouseleave(function(){ setInterval(function(){imgOn(prev_img)},2000) })
        .click(function(){return false;});
Garyk писал(а): возможно ли прописать в коде блокировку повторной загрузки изображения
получится что-то вроде

Код: Выделить всё

...
    <script type="text/javascript">
    $(document).ready(function() {
        var prev_img = $('#img1').attr('src');
        $('.img1_link')
            .mouseenter(function(){ imgOn($(this).attr('pic'))})
            .mouseleave(function(){ setInterval(function(){imgOn(prev_img)},2000) })
            .click(function(){return false;});
    });
    var speed = 500;
    var in_progress = false;
    function imgOn(imgName) {
        if (in_progress)
            return;
        in_progress = true;
        $('#img1').fadeOut(speed, function() { $('#img1').attr('src',imgName).fadeIn(speed, function(){ in_progress = false; }); });
    }
    </script>
...
Вернуться к началу
Garyk
Сообщения: 3
Зарегистрирован: 02.02.2012
Добрый вечер!
Спасибо за подсказку!
Начал копать в этом направлении, но желаемый эффект еще не достиг - с setInterval начинает постоянно мигать основное изображение, которое вернулось после отвода мышки от превьюшек - заменил на setTimeout - стало получше, но не совсем то, что хотелось - если одна превьюшка, то все работает как часы, а если больше - то:
-провел мышкой по 2-м превьюшкам - отвел мышку - закрузилось (вернулось первое фото) и потом через примерно полсекунды- секунду еще раз завгрузилось .
-провел мышкой по 3-м превьюшкам - отвел мышку - закрузилось (вернулось первое фото) и потом еще 2 раза завгрузилось.
- и т.д. - сколько превьюшек просмотрел - столько раз мигает

если превьюшек больше 4-5, то все не успеваешь просмотреть - просто через 2с. загружается осн. фото - пробую лечить увеличением таймера.
Garyk писал(а): возможно ли прописать в коде блокировку повторной загрузки изображения
Последний код не срабатывает - при повторном подводе курсора к той же превьюшке - картинка все равно меняется.
:(

-- добавлено 02 фев 2012, 23:27 --

Посетила одна идейка - задержку и блокировку необходимо привязать не к конкретной превьюшке с конкретным id или классом, а к группе, заключенной в див или список - т.е. чтобы функции тайм-аута и блокировки повторного вызова начинали срабатывать когда курсор покинет поле всех миниатюр.
Будет ли такое работать и как теперь это привязать?
Вернуться к началу
Аватара пользователя
Distructor
Администратор
Сообщения: 1607
Зарегистрирован: 28.12.2009
завтра, если будет время, набросаю код.
Вернуться к началу
Garyk
Сообщения: 3
Зарегистрирован: 02.02.2012
Ура! У меня получилось!!!! :)
Я обернул превьюшки в див и теперь возврат основной картинки работает как хотелось.
Только с перезагрузкой картинки при повторном подводе мышки еще не нашел решения. :(
Привожу код - прошу дать совет правильно ли?:
код:

Код: Выделить всё

$('.img1_link')
        .mouseenter(function(){ imgOn($(this).attr('pic'))})
        .mouseleave(function(){ setInterval(function(){imgOn(prev_img)},2000) })
        .click(function(){return false;});
заменил на:

Код: Выделить всё

$('.img1_link')
        .mouseenter(function(){ imgOn($(this).attr('pic'))})
  //      .mouseleave(function(){ setTimeout(function(){imgOn(prev_img)}, 2500) }) /Применил к диву
        .click(function(){return false;});
$('#img_min')  .mouseleave(function(){ setTimeout(function(){imgOn(prev_img)}, 2500) }) ;
где #img_min - id дива, обернутого вокруг превьюшек.
2500 - задержка таймера (2,5сек) до возврата основной картинки после покидания курсором "территории" дива с миниатюрами

Итоговый код:

Код: Выделить всё

...
    <script type="text/javascript">
    $(document).ready(function() {
        var prev_img = $('#img1').attr('src');
        $('.img1_link')
            .mouseenter(function(){ imgOn($(this).attr('pic'))})
            .click(function(){return false;});
    $('#img_min')  .mouseleave(function(){ setTimeout(function(){imgOn(prev_img)}, 2500) }) ;
    });
    var speed = 500;
    var in_progress = false;
    function imgOn(imgName) {
        if (in_progress)
            return;
        in_progress = true;
        $('#img1').fadeOut(speed, function() { $('#img1').attr('src',imgName).fadeIn(speed, function(){ in_progress = false; }); });
    }
    </script>
...
Вернуться к началу
Ответить

Вернуться в «Вопросы по движкам/скриптам»