Смена картинки по клику?

Question

[Teri Fash]

Здравствуйте столкнулся я с такой задачей, есть блок на пол экрана и менюшка в самом верху, при клике на ссылку из меню подтягивает по url новую картинку на фон в блок, вопрос в том как данный процесс анимировать но с учетом анимации?

PS, может я что-то намудрил с исполнением, так что если кто-то посоветует альтернативное решение буду очень благодарен!

вот меню!

<a href="javascript:l_image ('https://static.pexels.com/photos/353644/pexels-photo-353644.jpeg')">Elegance</a>
<a href="javascript:l_image ('https://static.pexels.com/photos/356433/pexels-photo-356433.jpeg')">Creation</a>
<a href="javascript:l_image ('https://static.pexels.com/photos/354249/pexels-photo-354249.jpeg')">Family Office</a>
<a href="javascript:l_image ('https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg')">Experience</a>

вот блок куда пушет картинку!

<div class="img-container"><img src="https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg" name="example_img"alt=""></div>

а вот сам скрипт

function l_image (a) {
        document.example_img.src=a
    }

Answer 1

[ThunderCat]

<a href="javascript:l_image ('https://static.pexels.com/photos/353644/pexels-photo-353644.jpeg')">Elegance</a>

отличный пример го*нокода. Не надо так.

url новую картинку на фон в блок

<img src="https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg" name="example_img"alt="">

а где фон? Если просто картинке срц поменять то:

$('.menu_a').on('click',function(e){
e.preventDefault();
var imgurl = $(this).data('url');
$("#someimage").attr('src',imgurl);
})

хтмл поменять так:

<a href="#" data-url="https://static.pexels.com/photos/353644/pexels-photo-353644.jpeg">Elegance</a>
<div class="img-container">
     <img src="https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg" alt="" id="someimage">
</div>

Comments

[Teri Fash]

Отлично все работает, спасибо, а как к этому прикрутить анимацию правильно??

[ThunderCat]

Teri Fash, а что анимировать то? анимация чего, замены одной картинки на другую? Одна улетает другая прилетает?

[Teri Fash]

ThunderCat, Ну в целом можно и так, главное что бы более живее выглядело