Html 基于单选按钮选择显示、隐藏图像_Html_Css

Html 基于单选按钮选择显示、隐藏图像

html css

Html 基于单选按钮选择显示、隐藏图像,html,css,Html,Css,我试图创建一种交互式图像，根据单选按钮的选择进行更改我有在相同的位置和大小的所有图像分层，我希望一个部分中的一个层是可见的选择时，而其余的是隐藏的。这是为了展示你的选择组合。我试着用HTML和CSS来做这件事，感觉很接近，但不知道为什么它不起作用目前，该代码设置为仅使用皮革选项进行试验 <!doctype html> <html> <head> <style type="text/css"> lab

我试图创建一种交互式图像，根据单选按钮的选择进行更改

我有在相同的位置和大小的所有图像分层，我希望一个部分中的一个层是可见的选择时，而其余的是隐藏的。这是为了展示你的选择组合。我试着用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>


标签{
字体系列：“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、“DejaVu Sans Condensed”、Helvetica、Arial、“Sans serif”；
}
#基层{
背景图片：url（baseLayer.png）；
宽度：100%；
}
#选择部{
浮动：左；
填充：20px；
位置：相对位置；
}
.外衣{
位置：相对位置；
}
.层{
位置：绝对位置；
}
输入#leather1:选中#l1{
能见度：可见；
}
输入#leather2:选中#l2{
能见度：可见；
}
输入#leather1:未（：选中）~#l1{
可见性：隐藏；
}
输入#leather2:未（：选中）~#l2{
可见性：隐藏；
}
互动性
室内装潢：

1

2

3

皮革：

黑色

棕色

地板罩：

1.


2.


台面：

1.


2.

您的收音机输入和图像位于不同的div中，因此它们无法相互访问。如果选择的收音机影响显示的img，则必须转到

这太棒了！默里是一个很好的接触。然而，这段代码似乎并没有按照我所希望的方式工作。我希望其他层根据单击进行更改。我有一堆透明的图像，需要所有四种图像都可见。在你的情况下，比尔·默里。如果您从每个部分中选择一个项目，则应显示四个图像。但现在，它只适用于“室内装潢”部分，当我单击不同部分中的另一个按钮时，所有内容都会隐藏，直到我单击室内装潢中的另一个选项。这就是我目前正在尝试做的。选择会随着选择的不同而变化。好吧，我做了更新，希望能帮助它更接近你想要的。