|
|
22.12.2016, 17:35
|
|
Аспирант
|
|
Регистрация: 13.12.2016
Сообщений: 85
|
|
|
Наложение <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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
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>
Последний раз редактировалось рони, 22.12.2016 в 19:16.
|
|
22.12.2016, 19:01
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Но как, Холмс рони
Все дело в png с прозрачным фоном? |
|
22.12.2016, 19:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
|
Сообщение от Dilettante_Pro
|
|
Все дело в png с прозрачным фоном?
|
 |
|
22.12.2016, 22:22
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
рони,
Свезло. И даже opacity не понадобилось
|
|
23.12.2016, 00:19
|
|
Аспирант
|
|
Регистрация: 13.12.2016
Сообщений: 85
|
|
Класс. А скриптом их ни как не вытянуть ? Ну просто всё забивать в css, он же лопнет  |
|
23.12.2016, 00:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
|
KEMPZOR,
может не вытягивать, а из массива взять? и эти инпуты в форме ?
|
|
23.12.2016, 00:34
|
|
Аспирант
|
|
Регистрация: 13.12.2016
Сообщений: 85
|
|
Сообщение от рони
|
KEMPZOR,
может не вытягивать, а из массива взять? и эти инпуты в форме ?
|
Например у нартинок название 1 - Один, 2 - Два и так далее. Инпуты не в форме, если я правильно понял. |
|
23.12.2016, 00:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
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>
Последний раз редактировалось рони, 23.12.2016 в 00:59.
|
|
23.12.2016, 12:53
|
|
Аспирант
|
|
Регистрация: 13.12.2016
Сообщений: 85
|
|
|
Сообщение от рони
|
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 ?
|
|
|
|
