4 imagenes distintas para cada radiobuton
Publicado por Sam (1 intervención) el 17/07/2018 15:12:51
Hola amigas y amigos a ver si me puede ayudar con esto.
Miren necesito que 4 radiobutons los cuales mediante css muestran una imagen en cada uno de los radio butons en vez de ese circulo pequeño por defecto.
Y cuando se les hace click encima de esas imagenes , estas cambian por otra imagen como
que viene a ser la imagen pero remarcada quedando asi el efecto como que se ha hecho click encima de dicho radio buton.
Y esto lo hace bien pero....
Como digo son 4 radiobutons (osea cuatro imagenes), pero las cuatro imagenes son la misma imagen y necesito que sean 4 imagenes distintas. osea una diferente para cada radio buton y que al hacer click en cada una de ellas se muestre su correspondiente imagen remarcada.
Espero que se haya entendido.
Dejo aqui mi codigo para ver si me pueden ayudar.
gracias de antemano
Miren necesito que 4 radiobutons los cuales mediante css muestran una imagen en cada uno de los radio butons en vez de ese circulo pequeño por defecto.
Y cuando se les hace click encima de esas imagenes , estas cambian por otra imagen como
que viene a ser la imagen pero remarcada quedando asi el efecto como que se ha hecho click encima de dicho radio buton.
Y esto lo hace bien pero....
Como digo son 4 radiobutons (osea cuatro imagenes), pero las cuatro imagenes son la misma imagen y necesito que sean 4 imagenes distintas. osea una diferente para cada radio buton y que al hacer click en cada una de ellas se muestre su correspondiente imagen remarcada.
Espero que se haya entendido.
Dejo aqui mi codigo para ver si me pueden ayudar.
gracias de antemano
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
input[type="radio"]
{ display:none;}input[type="radio"] + label
{background-image:url(imgs/icono_0.png);
height: 70px; width: 70px;display:inline-block;
padding: 0 0 0 0px; cursor:pointer;}input[type="radio"]:checked + label
{background-image:url(imgs/icono_1.png);
}1
2
3
4
5
6
7
8
9
10
11
<input type="radio" id="id_1" value=0 name="pregunta_1" />
<label for="id_1"></label>
<input type="radio" id="id_2" value=4 name="pregunta_1" />
<label for="id_2"></label>
<input type="radio" id="id_3" value=6 name="pregunta_1" />
<label for="id_3"></label>
<input type="radio" id="id_4" value=10 name="pregunta_1" />
<label for="id_4"></label>
Valora esta pregunta
0
