Alterar imagem clicando em um radio

[Bruno Conte 4]

Pessoal, estou precisando mudar a imagem que esta mostrando ao usuário selecionar uma opção radio.

 

<input name="imagem1" type="radio" value="preto"/>

 

quero exemplo este site:

 

https://piranhaguard.co.uk/builder

[reebr 94]

Faz com CSS:

 

https://jsfiddle.net/jp08hqmh/

[Bruno Conte 4]

peguei o codigo lá e como sou meio leigo em css estou dando uma sofrida.

 

eu mudei o nome

 

div {

height: 600px;

width: 600px

}

para

imagem1 {

height: 600px;

width: 600px

}

e coloquei <div id='imagem1'></div>

e alterei o campo:

input[name=cachorro][value=marrom]:checked ~ div {

background: url(http://i.imgur.com/7p9FKTl.jpg) center center fixed;

background-size: cover

}

para

input[name=cachorro][value=marrom]:checked ~ imagem1 {

background: url(http://i.imgur.com/7p9FKTl.jpg) center center fixed;

background-size: cover

}

 

so que não funcionou, pois irei usar mais de uma div e estou sofrendo neste ponto.

[wootzor 103]

Experimenta assim.

[reebr 94]

Não existe elemento chamado "imagem1".

 

Se isso for um ID, coloque "#imagem1".

Se for uma classe, coloque ".imagem1".

[Bruno Conte 4]

galera uma duvida.

porque quando eu coloco as divs dentro de table elas somem?

 

 

<table width="100%" border="0">

<tr>

<td>Branco

<input type='radio' name='cachorro' value='marrom' checked/>

/ Marrom

<input type='radio' name='cachorro' value='branco'/></td>

<td><div id="imagem1"></div></td>

<td><div id="imagem2"></div></td>

</tr>

</table>

 

se tiver sem tabela so o codigo funciona, mais queria como e bem simples eu queria fazer as 3 colunas.