Наложение <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. Как это лучше поступить ? |
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> |
Но как,
Все дело в png с прозрачным фоном? |
Цитата:
|
рони,
Свезло. И даже opacity не понадобилось |
Класс. А скриптом их ни как не вытянуть ? Ну просто всё забивать в css, он же лопнет :)
|
KEMPZOR,
может не вытягивать, а из массива взять? и эти инпуты в форме ? |
Цитата:
|
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> |
Цитата:
|
Часовой пояс GMT +3, время: 18:17. |