Изменение фона другого изображения
Здравствуйте. На странице есть несколько элементов:
<figure> <img id="redPic" src="redPic.png"> <figcaption>Красная картинка</figcaption> </figure> <figure> <img id="greenPic" src="greenPic.png"> <figcaption>Зелёная картинка</figcaption> </figure> <img id="transparentBackground.png" src="transparentBackground.png"></img> Возможно ли с помощью JS сделать следующее:
|
<figure> <img id="redPic" src="https://javascript.ru/forum/image.php?u=19392&dateline=1385220798"/> <figcaption>Красная картинка</figcaption> </figure> <figure> <img id="greenPic" src="https://javascript.ru/forum/image.php?u=39916&dateline=1498604796"/> <figcaption>Зелёная картинка</figcaption> </figure> <img id="transparentBackground" src="https://javascript.ru/forum/image.php?u=7416&dateline=1372796129"/> <script> var target=document.getElementById('transparentBackground'); [].forEach.call(document.querySelectorAll('#redPic,#greenPic'),function(node){ node.addEventListener('click',function(){ target.src=node.src; }); }); </script> |
<figure> <img id="redPic" src="https://javascript.ru/cat/list/jquery_54.png"> <figcaption>Красная картинка</figcaption> </figure> <figure> <img id="greenPic" src="https://javascript.ru/cat/list/scriptaculous_54.png"> <figcaption>Зелёная картинка</figcaption> </figure> <img id="transparentBackground" src="https://img-fotki.yandex.ru/get/15517/66124276.2e4/0_c2654_881ccb5_S.png" ></img> <script> redPic.onclick = function() { transparentBackground.style.backgroundImage = "url(" + this.src + ")"; } greenPic.onclick = function() { transparentBackground.style.backgroundImage = "url(" + this.src + ")"; } </script> |
Или на базе скрипта Nexus
<figure> <img id="redPic" src="https://javascript.ru/cat/list/jquery_54.png"> <figcaption>Красная картинка</figcaption> </figure> <figure> <img id="greenPic" src="https://javascript.ru/cat/list/scriptaculous_54.png"> <figcaption>Зелёная картинка</figcaption> </figure> <img id="transparentBackground" src="https://img-fotki.yandex.ru/get/15517/66124276.2e4/0_c2654_881ccb5_S.png" ></img> <script> var target=document.getElementById('transparentBackground'); [].forEach.call(document.querySelectorAll('#redPic,#greenPic'),function(node){ node.addEventListener('click',function(){ target.style.backgroundImage = "url(" + this.src + ")"; }); }); </script> |
Цитата:
|
Часовой пояс GMT +3, время: 04:17. |