Imagenes por botones radio

layker · #1 (**permalink**) 23/05/2009, 05:07

Hola, estoy aciendo una encuesta y resulta que el diseño contiene una imagen para el "Si" y otra para el "No" (cuestion de estética) que sustituirian al los inputs radio.. se que se puede hacer con javascript pero mis conocimientos de este lenguaje son mu limitados
alguien m podria ayudar??
m gustaria que al pulsar sobre una imagen de Si o No se seleccione. osea cargaria otra imagen d otro color como si estuviera seleccionada.

un saludo y gracias de antemano

AnesGy · #2 (**permalink**) 23/05/2009, 10:38

El código es sencillo:

Primeras definiciones (van en una etiqueta <script type="text/javascript">...</script> antes o después de los radios mejorados.

Código javascripc:

Ver originalvar i, element, value;

Código onclick de cada radio (mantenlo en una línea):

Código javascript:

Ver originalvalue='valor de esta opción';i=0; while(element=document.getElementsById('radio'+i)){if(element != this){element.src='no.gif';}else{this.src='si.gif';}i+=1;}

En este código cambias si.gif por tu imagen para si, no.gif por tu imagen para no, y luego en cada radio button (que son imágenes espero) hay que especificar un valor para value (que es el valor que puedes comprobar después).

Los radio buttons han de tener la id 'radio' mas un número empezando por el 0. No se pueden saltar números, es decir, si tienes 10:

radio0, radio1, radio2 ... radio9.

layker · #3 (**permalink**) 23/05/2009, 11:37

No conssigo quue funcione.. :S el codigo que tengo es mas o menos esto.. lo intento aplicar y no m funciona... como lo tndria k poner?? muxas gracias

Código PHP:

  <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link href="css/estilos.css" rel="stylesheet" type="text/css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Encuesta</title> 
</head> 
 
<body> 
 
   
  <b>¿Quieres escuchar  Reggaeton?</b> 
     <div style="margin-top:5px; margin-bottom:5px;"> 
     <img src="images/si.jpg" width="33" height="21" />&nbsp;  
     <img src="images/no.jpg" width="33" height="21" /> 
     </div> 
 
     
     <b>¿Quieres escuchar  House?</b> 
     <div style="margin-top:5px; margin-bottom:5px;"> 
     <img src="images/si.jpg" width="33" height="21" />&nbsp;  
     <img src="images/no.jpg" width="33" height="21" /> 
     </div> 
     
     <b>¿Quieres escuchar  Electro?</b> 
     <div style="margin-top:5px; margin-bottom:5px;"> 
     <img src="images/si.jpg" width="33" height="21" />&nbsp;  
     <img src="images/no.jpg" width="33" height="21" /> 
     </div> 
     
     <b>¿Quieres escuchar  Pop?</b> 
     <div style="margin-top:5px; margin-bottom:5px;"> 
     <img src="images/si.jpg" width="33" height="21" />&nbsp;  
     <img src="images/no.jpg" width="33" height="21" /> 
     </div> 
     
..............etc............. 
</body> 
</html>

AnesGy · #4 (**permalink**) 23/05/2009, 12:00

Sólo una imagen. No dos. Lo que haces es cambiar la imagen que muestra el tag <img/>

Pero tu lo que pides no son radio buttons, son check boxes. Mirate la diferencia antes de preguntar.

layker · #5 (**permalink**) 23/05/2009, 12:20

yo lo k kiero son radio buttons. elegir uno u otro no ke se puedan elegir las 2 opciones

AnesGy · #6 (**permalink**) 23/05/2009, 14:00

Oh entonces está bien. El sistema debería funcionar.