Cambiar imagen al pulsar un radio button u otra imagen

AnDrEa MM · #1 (**permalink**) 08/02/2006, 05:06

La finalidad de todo es hacer una búsqueda de ciertos objetos por un campo q es una fecha. Para ello he creao algo del tipo "búsqueda de archivos" en Windows, q le puedes meter varios parámetros, entre ellos la fecha en q fue creado o omodificado o algo así... Vale pues mi aplicación tiene 4 opciones: "Día concreto", "Posterior a --", "Anterior a --" y "Entre -- y --". Cada una de esas opciones lleva asociado un radio button y seguido del nombre de cada opción hay una caja de texto y una imagen (calendario) para pinchar en ella y así se abre una ventana con un calendario para seleccionar la fecha deseada... Es decir, cada radio button lleva asociado un nombre, una caja de texto y una imagen. La funcionalidad q quiero conseguir es q, al pinchar en cada uno de los radio button, las demás imágenes se cambien por otra (q dé la sensación q se deshabilita la imagen, ya q la quiero poner es la misma imagen pero con menos intensidad), y a la vez q al pinchar en el radio button se haga lo mismo q se hace al pinchar en la imagen (mostrar el calendario). No sé si lo he explicado de forma q pueda entenderse o me he liado mucho... Dejo aquí el código necesario q puede ayudar a comprender todo:

Código HTML:

<input type=radio name=\"tipofecha\" value=\"1\" onclick=\"gestionarRadioButton(this)\">Día concreto ... <br><input id=\"fecha1\" type=\"text\" size=\"17\"><a href=\"javascript:NewCal('fecha1','ddmmyyyy')\"><img src=\"../img/cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pulse para seleccionar una fecha\"></a><br>
<input type=radio name=\"tipofecha\" value=\"2\" onclick=\"gestionarRadioButton(this)\">Posterior a ... <br><input id=\"fecha2\" type=\"text\" size=\"17\"><a href=\"javascript:NewCal('fecha2','ddmmyyyy')\"><img src=\"../img/cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pulse para seleccionar una fecha\"></a><br>
<input type=radio name=\"tipofecha\" value=\"3\" onclick=\"gestionarRadioButton(this)\">Anterior a ...  <br><input id=\"fecha3\" type=\"text\" size=\"17\"><a href=\"javascript:NewCal('fecha3','ddmmyyyy')\"><img src=\"../img/cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pulse para seleccionar una fecha\"></a><br>
<input type=radio name=\"tipofecha\" value=\"4\" onclick=\"gestionarRadioButton(this)\">Entre ...  <br><input id=\"fecha4\" type=\"text\" size=\"17\"><a href=\"javascript:NewCal('fecha4','ddmmyyyy')\"><img src=\"../img/cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pulse para seleccionar una fecha\"></a>

Eso es lo q me crea los radio buttons, cajas de texto e imágenes asociadas...

La función q quiero conseguir sería algo así...

Código PHP:

  <script language="JavaScript">  
    var valor = 0; 
     
    function gestionarRadioButton(rb) { 
        valor = rb.value; 
        if (valor=="1") { 
            fecha1.focus(); 
            // Q se cambien las imágenes correspondientes a los radio buttons 2, 3 y 4 
        } 
        else if (valor=="2") { 
            fecha2.focus(); 
            // Q se cambien las imágenes correspondientes a los radio buttons 1, 3 y 4 
        } 
        else if (valor=="3") { 
            fecha3.focus(); 
            // Q se cambien las imágenes correspondientes a los radio buttons 1, 2 y 4 
        } 
        else if (valor=="4") { 
            fecha4.focus(); 
            // Q se cambien las imágenes correspondientes a los radio buttons 1, 2 y 3 
        } 
    } 
</script>

Pero con el código adecuado, claro. Ahora simplemente consigo q me ponga el cursor donde deseo, nada más. Quiero conseguir poder cambiar las imágenes, y a la vez, q si se pulsa una imagen, se seleeciones el radio button asociado.
No sé si es posible, ni sé si he sabido explicarlo. Si no se entiende q alguien me diga e intento hacerlo de otra manera.
Gracias de cualquier forma.

ludovico2000 · #2 (**permalink**) 08/02/2006, 10:49

Pon la función que utilizas para cambiar el foco a ver si sobre ella te puedo poner para cambiar la imagen

AnDrEa MM · #3 (**permalink**) 08/02/2006, 15:25

Está puesta, es la de laparte de abajo de los 2 trozos de código q he puesto...

ludovico2000 · #4 (**permalink**) 10/02/2006, 06:53

Sí, perdona, es que me faltaba quitar algunos \ del primer código y no rulaba

Aqui tienes: (lo pongo como texto para resaltar los cambios)

<html>
<head>
</head>

<script language="JavaScript">
var valor = 0;

function gestionarRadioButton(rb) {
valor = rb.value;
if (valor=="1") {
fecha1.focus();
uno.src="on.gif";
dos.src="off.gif";
tres.src="off.gif";
cuatro.src="off.gif";
}
else if (valor=="2") {
fecha2.focus();
uno.src="off.gif";
dos.src="on.gif";
tres.src="off.gif";
cuatro.src="off.gif";
}
else if (valor=="3") {
fecha3.focus();
uno.src="off.gif";
dos.src="off.gif";
tres.src="on.gif";
cuatro.src="off.gif";
}
else if (valor=="4") {
fecha4.focus();
uno.src="off.gif";
dos.src="off.gif";
tres.src="off.gif";
cuatro.src="on.gif";
}
}
</script>
<body>
<input type=radio name="tipofecha" value="1" onclick="gestionarRadioButton(this)">
Día concreto ...
<br>
<input id="fecha1" type="text" size="17">
<a href="javascript:NewCal('fecha1','ddmmyyyy')">
<img id="uno" src="off.gif" width="16" height="16" border="0" alt="Pulse para seleccionar una fecha">
</a>
<br>

<input type=radio name="tipofecha" value="2" onclick="gestionarRadioButton(this)">
Posterior a ...
<br>
<input id="fecha2" type="text" size="17">
<a href="javascript:NewCal('fecha2','ddmmyyyy')">
<img id="dos" src="off.gif" width="16" height="16" border="0" alt="Pulse para seleccionar una fecha">
</a>
<br>

<input type=radio name="tipofecha" value="3" onclick="gestionarRadioButton(this)">
Anterior a ...
<br>
<input id="fecha3" type="text" size="17">
<a href="javascript:NewCal('fecha3','ddmmyyyy')">
<img id="tres" src="off.gif" width="16" height="16" border="0" alt="Pulse para seleccionar una fecha">
</a>
<br>

<input type=radio name="tipofecha" value="4" onclick="gestionarRadioButton(this)">
Entre ...
<br>
<input id="fecha4" type="text" size="17">
<a href="javascript:NewCal('fecha4','ddmmyyyy')">
<img id="cuatro" src="off.gif" width="16" height="16" border="0" alt="Pulse para seleccionar una fecha">
</a>

</body>
</html>

LO PUEDES VER EN MARCHA EN: http://galeon.com/ludovico2000/test/index.htm

AnDrEa MM · #5 (**permalink**) 10/02/2006, 13:53

Wow, perfecto, es justo lo q necesitaba

Mil gracias. Ahora voy a aplicarlo a mi web, a ver si me funciona tan bien como a tí... jeje. Deséame suerte...

ludovico2000 · #6 (**permalink**) 15/02/2006, 13:25

Ahora que tenía un ratito, he mejorado el asunto: ahora puedes habilitar/deshabilitar los input, para evitar usuarios patazas...

http://galeon.com/ludovico2000/test/index.htm

Resumen del código:

<script language="JavaScript">
var valor = 0;

function gestionarRadioButton(rb) {
valor = rb.value;
if (valor=="1") {
fecha1.disabled=false;
fecha1.style.background="white";
fecha2.disabled=true;
fecha2.style.background="#C3C3C3";
fecha3.disabled=true;
fecha3.style.background="#C3C3C3";
fecha4.disabled=true;
fecha4.style.background="#C3C3C3";
fecha1.focus();
uno.src="on.gif";
dos.src="off.gif";
tres.src="off.gif";
cuatro.src="off.gif";
}
else if (valor=="2") {
fecha1.disabled=true;
fecha1.style.background="#C3C3C3";
fecha2.disabled=false;
fecha2.style.background="white";
....

<input type=radio name="tipofecha" value="1" onclick="gestionarRadioButton(this)">Día concreto ... <br><input id="fecha1" type="text" size="17" style="background:#C3C3C3" disabled><a href="javascript:NewCal('fecha1','ddmmyyyy')"><img id="uno" src="off.gif" width="16" height="16" border="0" alt="Pulse para seleccionar una fecha"></a><br>

AnDrEa MM · #7 (**permalink**) 16/02/2006, 04:35

Sip, eso lo tenía hecho. Bueno, no exactamente así, pero no sé si alguna de las 2 formas es mejor o peor q la otra... Yo había usado:

if (valor=="1") {
fecha1.readOnly="";
fecha2.readonly="readOnly";
...
}

Es mejor deshabilitarlos o es indistinto?? Tal vez lo del readOnly no lo soporten todos los navegadores...
Gracias por la modificación y por tu atención!!

ludovico2000 · #8 (**permalink**) 16/02/2006, 06:56

Son cosas diferentes:
según http://html.conclase.net/w3c/html401...act/forms.html...

read only:

Cita:

Definiciones de atributos

readonly [CI]
Cuando está establecido para un control de formulario, este atributo booleano impide que haya cambios en el control.
El atributo readonly especifica si el control puede ser modificado por el usuario.

Cuando está establecido, el atributo readonly tiene los siguientes efectos sobre un elemento:

El foco puede dirigirse hacia elementos de sólo lectura, pero éstos no pueden ser modificados por el usuario.
Los elementos de sólo lectura están incluidos en la navegación con tabulador.
Los elementos de sólo lectura pueden tener éxito.
Los siguientes elementos soportan el atributo readonly: INPUT y TEXTAREA.

El modo en que se representan los elementos de sólo lectura depende del agente de usuario.

Nota. La única manera de modificar dinámicamente el valor del atributo readonly es mediante un script.

disabled:

Cita:

17.12.1 Controles deshabilitados
Definiciones de atributos

disabled [CI]
Cuando se establece para un control de formulario, este atributo booleano deshabilita el control para la entrada de datos por parte del usuario.
Cuando está establecido, el atributo disabled tiene los siguientes efectos sobre un elemento:

No se puede dirigir el foco hacia controles deshabilitados.
En el orden de tabulación, se salta por encima de los controles deshabilitados.
Los controles deshabilitados no pueden tener éxito.
Los siguientes elementos soportan el atributo disabled: BUTTON, INPUT, OPTGROUP, OPTION, SELECT y TEXTAREA.

Este atributo se hereda, pero las declaraciones locales prevalecen sobre el valor heredado.

El modo en que se representan los elementos deshabilitados depende del agente de usuario. Por ejemplo, algunos agentes de usuario dibujan en gris los objetos de menú deshabilitados, los rótulos de los botones, etc.

En este ejemplo, el elemento INPUT está deshabilitado. Por tanto, no puede recibir datos del usuario, y su valor no se enviará con el formulario.

<INPUT disabled name="pedro" value="piedra">

Nota. El único modo de modificar dinámicamente el valor del atributo disabled es por medio de un script.

En resumen:

read only no permite al usuario escribir, pero existe (tiene valor, toma foco,...), mientras que disabled no existe (mientras está disabled cuando se envía el form, no toma valor; y no puede recibir el foco).

Yo usaría read only para datos que hay que enviar y que no quiero que el usuario toquetee (que lo seleccione de otro sitio, como un calendario), y disabled para que sólo rellene uno de esos campos y aunque ponga algo en otro, lo omita.

espero haberte aclarado...

Para sacarte estas definiciones he buscado en google:

http://www.google.es/search?hl=es&q=...a=lr%3Dlang_es