Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Наложение <img> поверх <img>. (https://javascript.ru/forum/misc/66549-nalozhenie-img-poverkh-img.html)

KEMPZOR 22.12.2016 17:35

Наложение <img> поверх <img>.
 
Здравствуйте уважаемый спецы. Подскажите пожалуйста, как реализовать такую схему:

1.Есть картинка в div'e.
http://s017.radikal.ru/i420/1612/c2/4c5191812863.png

2. Есть много input label в которые обвёрнуты картинкой. По нажатию выбирается соответствующая картинка.

<input class="button-class-material" id="roll_mater_32" type="radio" name="catalmat_roll" value="2">
          <label class="drinkcard-cc" for="roll_mater_32"><img class="obrazci_tkan" src="http://l-c.by/d/402010/d/32_ays_01.jpg" width="65" height="65" title="Айс 01">


Нужно чтобы по нажатию на input эту картинку накладывало как слой в div'e. Как это лучше поступить ?

рони 22.12.2016 18:17

KEMPZOR,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color: #E0FFFF;
  }

  div{
      width: 356px;
      height: 310px;
    background-size: 342px 290px;
    background-repeat: no-repeat;
     background-position: 10px 16px;
  }
 .button-class-material:nth-of-type(1):checked ~ div {
   background-image: url(http://l-c.by/d/402010/d/32_ays_01.jpg);
 }
 .button-class-material:nth-of-type(2):checked ~ div {
   background-image: url(http://photostart.ru/images/1/005103.jpg);
 }
  .button-class-material:nth-of-type(3):checked ~ div {
   background-image: url(http://www.lenagold.ru/fon/tkan/tkan/beg/begtkan56.jpg);
 }

  </style>
  </head>

<body>

<input class="button-class-material" id="roll_mater_32" type="radio" name="catalmat_roll" value="2">
<label class="drinkcard-cc" for="roll_mater_32"><img class="obrazci_tkan" src="http://l-c.by/d/402010/d/32_ays_01.jpg" width="65" height="65" title="Айс 01"></label>
<input class="button-class-material" id="roll_mater_33" type="radio" name="catalmat_roll" value="2" checked="checked">
<label class="drinkcard-cc" for="roll_mater_33"><img class="obrazci_tkan" src="http://photostart.ru/images/1/005103.jpg" width="65" height="65" title="Айс 01"></label>
<input class="button-class-material" id="roll_mater_34" type="radio" name="catalmat_roll" value="2">
<label class="drinkcard-cc" for="roll_mater_34"><img class="obrazci_tkan" src="http://www.lenagold.ru/fon/tkan/tkan/beg/begtkan56.jpg" width="65" height="65" title="Айс 01"></label>

<div><img src="http://s017.radikal.ru/i420/1612/c2/4c5191812863.png" alt=""></div>
</body>
</html>

Dilettante_Pro 22.12.2016 19:01

Но как, Холмс рони:-?
Все дело в png с прозрачным фоном?

рони 22.12.2016 19:15

Цитата:

Сообщение от Dilettante_Pro
Все дело в png с прозрачным фоном?

:yes:

Dilettante_Pro 22.12.2016 22:22

рони,
Свезло. И даже opacity не понадобилось

KEMPZOR 23.12.2016 00:19

Класс. А скриптом их ни как не вытянуть ? Ну просто всё забивать в css, он же лопнет :)

рони 23.12.2016 00:26

KEMPZOR,
может не вытягивать, а из массива взять? и эти инпуты в форме ?

KEMPZOR 23.12.2016 00:34

Цитата:

Сообщение от рони (Сообщение 438709)
KEMPZOR,
может не вытягивать, а из массива взять? и эти инпуты в форме ?

Например у нартинок название 1 - Один, 2 - Два и так далее. Инпуты не в форме, если я правильно понял.:-?

рони 23.12.2016 00:56

KEMPZOR,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color: #E0FFFF;
  }

  div{
      width: 356px;
      height: 310px;
    background-size: 342px 290px;
    background-repeat: no-repeat;
     background-position: 10px 16px;
  }

  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var inp = document.querySelectorAll(".button-class-material"),
        demo = document.querySelector(".demo"),
        arr = ["http://l-c.by/d/402010/d/32_ays_01.jpg", "http://photostart.ru/images/1/005103.jpg", "http://www.lenagold.ru/fon/tkan/tkan/beg/begtkan56.jpg"];

    function setImg() {
        arr.forEach(function(img, i) {
            inp[i].checked && (demo.style.backgroundImage = "url(" + img + ")")
        })
    }
   [].forEach.call(inp, function(item) {
        item.addEventListener("change", setImg, false)
    });
    setImg()
});
  </script>
</head>

<body>


<input class="button-class-material" id="roll_mater_32" type="radio" name="catalmat_roll" value="2" >
<label class="drinkcard-cc" for="roll_mater_32"><img class="obrazci_tkan" src="http://l-c.by/d/402010/d/32_ays_01.jpg" width="65" height="65" title="Айс 01"></label>
<input class="button-class-material" id="roll_mater_33" type="radio" name="catalmat_roll" value="2" checked="checked" >
<label class="drinkcard-cc" for="roll_mater_33"><img class="obrazci_tkan" src="http://photostart.ru/images/1/005103.jpg" width="65" height="65" title="Айс 01"></label>
<input class="button-class-material" id="roll_mater_34" type="radio" name="catalmat_roll" value="2">
<label class="drinkcard-cc" for="roll_mater_34"><img class="obrazci_tkan" src="http://www.lenagold.ru/fon/tkan/tkan/beg/begtkan56.jpg" width="65" height="65" title="Айс 01"></label>

<div class="demo"><img src="http://s017.radikal.ru/i420/1612/c2/4c5191812863.png" alt=""></div>
</body>
</html>

KEMPZOR 23.12.2016 12:53

Цитата:

Сообщение от рони (Сообщение 438680)
KEMPZOR,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color: #E0FFFF;
  }

  div{
      width: 356px;
      height: 310px;
    background-size: 342px 290px;
    background-repeat: no-repeat;
     background-position: 10px 16px;
  }
 .button-class-material:nth-of-type(1):checked ~ div {
   background-image: url(http://l-c.by/d/402010/d/32_ays_01.jpg);
 }
 .button-class-material:nth-of-type(2):checked ~ div {
   background-image: url(http://photostart.ru/images/1/005103.jpg);
 }
  .button-class-material:nth-of-type(3):checked ~ div {
   background-image: url(http://www.lenagold.ru/fon/tkan/tkan/beg/begtkan56.jpg);
 }

  </style>
  </head>

<body>

<input class="button-class-material" id="roll_mater_32" type="radio" name="catalmat_roll" value="2">
<label class="drinkcard-cc" for="roll_mater_32"><img class="obrazci_tkan" src="http://l-c.by/d/402010/d/32_ays_01.jpg" width="65" height="65" title="Айс 01"></label>
<input class="button-class-material" id="roll_mater_33" type="radio" name="catalmat_roll" value="2" checked="checked">
<label class="drinkcard-cc" for="roll_mater_33"><img class="obrazci_tkan" src="http://photostart.ru/images/1/005103.jpg" width="65" height="65" title="Айс 01"></label>
<input class="button-class-material" id="roll_mater_34" type="radio" name="catalmat_roll" value="2">
<label class="drinkcard-cc" for="roll_mater_34"><img class="obrazci_tkan" src="http://www.lenagold.ru/fon/tkan/tkan/beg/begtkan56.jpg" width="65" height="65" title="Айс 01"></label>

<div><img src="http://s017.radikal.ru/i420/1612/c2/4c5191812863.png" alt=""></div>
</body>
</html>

Вопрос: почему не работает если div переместить выше input ?


Часовой пояс GMT +3, время: 18:17.