Input con funcion javascript para cambiar imagen

[dvd_alon]

Estoy intentado hacer mis primeras cosas en javascript, y no ando muy afinado.

Lo que quiero hacer, es un input de tipo imagen, que al hacer clic sobre el cambi la imagen dependiendo del campo value, y que cambie tambien el value.

Entonces tengo lo siguiente:

Código:

<SCRIPT LANGUAGE="JavaScript">
	mi_imagen1=new Image
	mi_imagen1.src="images/filtro1S.gif"
	mi_imagen2=new Image
	mi_imagen2.src="images/filtro1N.gif"
function cambia_imagen() { 
if (this.value == 'N')
{
document.images['fil1'].src=mi_imagen2.src
this.value=='S';
}
else 
{
document.images['fil1'].src=mi_imagen1.src
this.value=='N';
}
</script>

Código HTML:

<form><input id="filtro" type="image" name="fil1"  value = "N" onclick="javascript:cambia_imagen();" src="images/filtro1S.gif"></form> 

Logicamente no lo hace. Se que tiene cosas mal, como el this.value del if, pero no se como hacer referencia a campo value del input... y seguro que más cosas...

Espero haberme explicado y que podais ayudarme.

Un saludo.

P.D.: Aprobecho para preguntar aqui, el codigo javascrip ¿tiene que ir en html como lo he puesto¿ ¿O se puede meter en otro archivo y llamarlo?

[dvd_alon]

Una ayuda por favor, he intentado varias cosas pero no lo consigo.

[caricatos]

Hola:

El código lo puedes enlazar a un fichero externo que debes poner en el atributo src del tag script.

Sobre tu problema te diré que los input type="image" son controles que hacen submit añadiendo las coordenadas de donde se pinche de la imagen, así que si quieres lanzar un script, es el control incorrecto. Podría usar una simple imagen (img), o cancelar el envío, pero no me detendré en esa opción porque es inadecuado semánticamente, además que de esa forma posiblemente te sirva lo que tienes, ya que la colección document.images, es de los tags img... para los input se usa la colección document.forms...

Saludos

[dvd_alon]

Voy a explicar lo que quiero hacer:

Quiero poner filtro con check, pero de una manera grafica para que quede "más bonito".

Lo que necesito es "algo" que guarde un valor (S o N) y que en consecuencia a este valor, me muestre una imagen u otra, (images/filtro1S.gif o images/filtro1N.gif).

Y que cuando haga un submit, me envie estos datos.

Entiendo que lo me recomiendas, entonces seria algo similar a esto:

<form>
<input type="hidden" name="filtro1" value ="S" />
<IMG SRC="javascript:cambia_imagen();">

<input id="boton" type="image" name="cal" alt="1" value="1" src="images/01.gif" onmouseover = "this.src='images/1.gif'" onmouseout = "this.src='images/01.gif'">

</form>

La parte que no se como desarrollarla, es la de la funcion cambia_imagen. Esta funcion deberia cambiarme la imagen y el value de filtro1 cada vez que haga click sobre la imagen.

Por ultimo, que cuando haga clic en la imagen boton (name="cal") me haga submit.

No se como se hace el evento onclic para una imagen, por eso habia utilizado un input de tipo imagen que tiene este evento. Aunque viendo lo que me dices, me he dado cuenta que no es inadecuado.

¿Me podrias ayudar o enfocar un poco en como debo desarrollarlo?

Muchas gracias por la ayuda