我试图创建一种基于单选按钮选择而变化的交互式图像。
我将所有图像分层放在相同的位置和大小，并且我希望在选中时可以看到一个图层中的一个图层，而其余部分则被隐藏。这是为了展示您的选择组合的样子。我尝试用HTML和CSS来做这件事并且感觉很接近，但不知道它为什么不起作用。
目前，代码设置为仅使用皮革选项进行试验。
<!doctype html>
<html>
<head>
<style type="text/css">
label {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
#baseLayer {
background-image: url(baseLayer.png);
width: 100%;
}
#choices div {
float: left;
padding: 20px;
position: relative;
}
.outerWrapper {
position: relative;
}
.layer {
position: absolute;
}
input#leather1:checked ~ #l1 {
visibility: visible;
}
input#leather2:checked ~ #l2 {
visibility: visible;
}
input#leather1:not(:checked) ~ #l1 {
visibility: hidden;
}
input#leather2:not(:checked) ~ #l2 {
visibility: hidden;
}
</style>
<meta charset="UTF-8">
<title>Interactivity</title>
</head>
<body>
<div id="baseLayer" class="outerWrapper">
<img id="c1" class="layer" src="counter1.png">
<img id="c2" class="layer" src="counter2.png">
<img id="f1" class="layer" src="floor1.png">
<img id="f2" class="layer" src="floor2.png">
<img id="l1" class="layer" src="leather1.png">
<img id="l2" class="layer" src="leather2.png">
<img id="u1" class="layer" src="upholstery1.png">
<img id="u2" class="layer" src="upholstery2.png">
<img id="u3" class="layer" src="upholstery3.png">
</div>
<div id="choices">
<div>
Upholstery:<br/>
<input type="radio" name="u" id="upholstery1" value="Black">
<label for="upholstery1">1</label><br>
<input type="radio" name="u" id="upholstery2" value="blue">
<label for="upholstery2">2</label><br>
<input type="radio" name="u" id="upholstery3" value="green">
<label for="upholstery3">3</label><br>
</div>
<div>
Leather:<br/>
<input type="radio" name="l" id="leather1" value="black_leather">
<label> Black</label><br>
<input type="radio" name="l" id="leather2" value="brown_leather">
<label> Brown</label><br>
</div>
<div>
Floor Cover:<br/>
<label> 1
<input type="radio" name="f" value="orange"></label><br>
<label> 2
<input type="radio" name="f" value="yellow"></label><br>
</div>
<div>
Countertop:<br/>
<label> 1
<input type="radio" name="c" value="pink"></label><br>
<label> 2
<input type="radio" name="c" value="teal"></label><br>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
您的无线电输入和图像位于不同的div中，因此它们无法相互访问。对于选择影响所示img的广播，必须前往<div并向后退#baseLayer。你不能用css在DOM树上旅行。您需要添加一些JavaScript。以下是一个例子。
修改 在javascript / jquery中添加了一些注释，这样你就可以理解我做了什么，以便能够根据你的需要进行复制。
$('#choices input').on('change',function(){
//Getting the content of the label that is right after the input.
var numb = $(this).next().html();
//Hiding all the with an id that containes the input's name.
$("img[id*='"+this.name+"']").hide();
//Using the name of the input element and adding the content of the label to it, showing the image with that id.
$('#'+this.name+numb).show();
});label {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
#baseLayer {
background-color:peachpuff;
width: 100%;
padding:15px;
display:table;
}
#choices{
display:table;
width:100%;
}
#choices div {
float: left;
padding: 20px;
position: relative;
}
.column-half{
float:left;
width:50%;
position:relative;
}
.outerWrapper {
position: relative;
}
.layer {
display:block;
}
input#leather1:checked ~ #l1 {
visibility: visible;
}
input#leather2:checked ~ #l2 {
visibility: visible;
}
input#leather1:not(:checked) ~ #l1 {
visibility: hidden;
}
input#leather2:not(:checked) ~ #l2 {
visibility: hidden;
}
.layer{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<style type="text/css">
</style>
<meta charset="UTF-8">
<title>Interactivity</title>
</head>
<body>
<div id="choices">
<div>
Upholstery:<br/>
<input type="radio" name="u" id="upholstery1" value="Black">
<label for="upholstery1">1</label><br>
<input type="radio" name="u" id="upholstery2" value="blue">
<label for="upholstery2">2</label><br>
<input type="radio" name="u" id="upholstery3" value="green">
<label for="upholstery3">3</label><br>
</div>
<div>
Leather:<br/>
<input type="radio" name="l" id="leather1" value="black_leather">
<label>1</label><br>
<input type="radio" name="l" id="leather2" value="brown_leather">
<label>2</label><br>
</div>
<div>
Floor Cover:<br/>
<input type="radio" name="f" value="orange">
<label>1</label><br>
<input type="radio" name="f" value="yellow">
<label>2</label><br>
</div>
<div>
Countertop:<br/>
<input type="radio" name="c" value="pink">
<label>1</label><br>
<input type="radio" name="c" value="teal">
<label>2</label><br>
</div>
</div>
<div id="baseLayer" class="outerWrapper">
<div class="column-half">
<img id="c1" class="layer" src="http://www.fillmurray.com/100/200">
<img id="c2" class="layer" src="http://www.fillmurray.com/150/200">
</div>
<div class="column-half">
<img id="f1" class="layer" src="http://www.fillmurray.com/200/200">
<img id="f2" class="layer" src="http://www.fillmurray.com/250/200">
</div>
<div class="column-half">
<img id="l1" class="layer" src="http://www.fillmurray.com/300/200">
<img id="l2" class="layer" src="http://www.fillmurray.com/350/200">
</div>
<div class="column-half">
<img id="u1" class="layer" src="http://www.fillmurray.com/400/200">
<img id="u2" class="layer" src="http://www.fillmurray.com/450/200">
<img id="u3" class="layer" src="http://www.fillmurray.com/500/200">
</div>
</div>
</body>
</html>