Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.12.2017, 15:01
Интересующийся
Отправить личное сообщение для Win_D Посмотреть профиль Найти все сообщения от Win_D
 
Регистрация: 08.09.2016
Сообщений: 24

Изменение фона другого изображения
Здравствуйте. На странице есть несколько элементов:
  1. Изображение красного цвета
  2. Изображение зелёного цвета
  3. Картинка с прозрачным фоном
<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 сделать следующее:
  • при нажатии на id="redPic", у картинки transparentBackground.png в качестве фона устанавливается изображение redPic.png
  • соответственно, при нажатии на id="greenPic", у картинки transparentBackground.png в качестве фона устанавливается изображение greenPic.png
Заранее огромное спасибо за помощь
Ответить с цитированием
  #2 (permalink)  
Старый 19.12.2017, 15:35
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,793

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 19.12.2017, 15:42
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 19.12.2017, 15:51
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Или на базе скрипта 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>
Ответить с цитированием
  #5 (permalink)  
Старый 19.12.2017, 16:45
Интересующийся
Отправить личное сообщение для Win_D Посмотреть профиль Найти все сообщения от Win_D
 
Регистрация: 08.09.2016
Сообщений: 24

Сообщение от Dilettante_Pro Посмотреть сообщение
<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>
То что надо! Спасибо огромное!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение позиции фона по скроллу kd241286zjv jQuery 4 29.11.2017 10:06
Интерактивное изменение цвета сегментов изображения dmitriy94 Общие вопросы Javascript 6 27.12.2014 19:14
Изменение рабочей области изображения pagemaster Общие вопросы Javascript 19 15.04.2013 18:06
Алгоритм плавной смены фона или изображения vandy3 Общие вопросы Javascript 6 11.11.2010 00:56
Как можно сделать подгрузку и смену изображения без перезагрузки страницы с другого Евгений Болгов jQuery 11 21.10.2010 18:18