Замена изображения при наведении?

Question

[Mixa]

Пытаюсь сделать замену картинки при наведении (чтобы гиф вместо статистики был при наведени)

<div style="width: 200px; height: 286"><span>test</span>
<img id="imgfor-331" src="http://olga-tereshchenko.com.ua/wp-content/uploads/2016/03/Leopold_Levitskiy_poster-400x572.jpg" width="200" height="286" alt="Leopold Levitskiy" />
<script type="text/javacsript">
$(function () {
    $.preloadImages("http://olga-tereshchenko.com.ua/wp-content/uploads/2016/03/Experimental_650-400x561.gif");
});
$(document).ready(function () {
        $("#imgfor-331").hover(
            function() {
                $(this).attr("src", "http://olga-tereshchenko.com.ua/wp-content/uploads/2016/03/Experimental_650-400x561.gif");
            },
            function() {
                $(this).attr("src", "http://olga-tereshchenko.com.ua/wp-content/uploads/2016/03/Leopold_Levitskiy_poster-400x572.jpg");
            }                         
        );                  
    });
</script>
</div>

но почему то не срабатывает и никак не могу найти причину. Сам глюк вот здесь (в первой картинке): olga-tereshchenko.com.ua

Буду признателен за подсказки.

Answer 1

[1001001 111]

https://jsfiddle.net/w1e6fh39/

Comments

[Mixa]

Спасибо! Лаконично и, главное, работает! )

[Артем]

Спасибо))

Answer 2

[Oleg Shevelev]

Попробуйте более универсальный вариант. В этом случае даже если появится новый элемент набора с таким классом события распространятся и на него.

<img class="image_hover" src="file.jpg" data-image-over="file.gif" data-image-out="file.jpg">

<script>
$(document).on("mouseover", "img.image_hover", function() {
    $(this).attr("src", $(this).data("imgOver"));
});
$(document).on("mouseout", "img.image_hover", function() {
    $(this).attr("src", $(this).data("imgOut"));
});
</script>

Answer 3

[Алексей A]

Убрал

$(function () {
    $.preloadImages("http://olga-tereshchenko.com.ua/wp-content/uploads/2016/03/Experimental_650-400x561.gif");
});

codepen.io

Возможно, что-то не так сделали с preloadImages.