Cмена картинки по клику
Здравствуйте столкнулся я с такой задачей есть блок на пол экрана и менюшка в самом верху, при клике на ссылку из меню подтягивает по 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
}
|
TeriFash,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
width: 100%; height: 100%;
}
</style>
</head>
<body>
<a href="#" onclick="l_image('https://static.pexels.com/photos/353644/pexels-photo-353644.jpeg', 2); return false;">Elegance</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/356433/pexels-photo-356433.jpeg', 2); return false;">Creation</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/354249/pexels-photo-354249.jpeg', 2); return false;">Family Office</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg', 2); return false;">Experience</a>
<div class="img-container"><img src="https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg" name="example_img"alt=""></div>
<script>
function l_image(a, b) {
if (window.t) clearTimeout(t);
if (window.t1) clearTimeout(t1);
var img = document.example_img;
img.style.transition = 'opacity ' + b + 's';
img.style.opacity = '0';
window.t = setTimeout(function() {
img.src = a;
}, b * 1000 - 500);
window.t1 = setTimeout(function() {
img.style.opacity = '1';
}, b * 1000);
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:04. |