Cambio imagen input type=image

erxaca · #1 (**permalink**) 07/02/2011, 13:12

Hola a todos!

tengo un código js que cambia de imagen al hacer click, lo hace perfectamente en una etiqueta img pero quiero que lo haga en un input type image pero al hacer click en esta se envía, ¿como puedo hacer para que cambia la imagen del input type image y no me envíe el formulario?

el codigo js es el siguiente

Código PHP:

  <SCRIPT LANGUAGE="JavaScript"> 
mi_imagen1=new Image 
mi_imagen1.src="images/pizzas-off.png" 
mi_imagen2=new Image 
mi_imagen2.src="images/pizzas-on.png" 
var i=1; 
function cambia_imagen() {  
if (i == 1) 
{ 
document.images['prueba'].src=mi_imagen2.src 
i=2; 
} 
else  
{ 
document.images['prueba'].src=mi_imagen1.src; 
i=1; 
} 
} 
</script>

y el html

Código PHP:

   <form action="" method=""> 
    <input type="image" src="images/pizzas-off.png" name="prueba"  value="" onclick="javascript:cambia_imagen();" /> 
</form>

Saludos

_cronos2 · #2 (**permalink**) 07/02/2011, 13:20

Los input image envían los formularios, si no quieres que se envíe pon un img y listo, ¿no?

erxaca · #3 (**permalink**) 07/02/2011, 13:31

Necesito usar una etiqueta que permita el value y el cambio de imagen ya que ademas de cambiar la imagen necesito añadirle un value

_cronos2 · #4 (**permalink**) 07/02/2011, 13:40

¿Para qué necesitas el value? ¿Para enviarlo?
Saludos (:

erxaca · #5 (**permalink**) 07/02/2011, 13:45

Si, tengo varios ingredientes que al clicarlos se cambia la imagen para ver que estan seleccionados y necesito establecerle el value para luego recogerlos con php, he pensado que quizas pueda usar un img que sea el que cambie de imagen y un input hidden con el mismo value, que os parece?

_cronos2 · #6 (**permalink**) 07/02/2011, 14:25

Podrías hacerlo así:

Código HTML:

Ver original<img src='foto.jpg' onclick='cambiarFoto(this);' />
<input type='hidden' name='oculto' id='oculto' value='no' />

Código Javascript:

Ver originalfunction cambiarFoto(img){
 img.src = ims.src == 'foto.jpg' ? 'imagen.jpg' : 'foto.jpg';
 document.getElementById('oculto').value = document.getElementById('oculto').value == 'no' ? 'si' :'no';
}

Saludos (:

erxaca · #7 (**permalink**) 07/02/2011, 14:46

Gracias _cronos2, cuando lo pruebe os digo, debo de irme!!

Saludos y gracias!

erxaca · #8 (**permalink**) 13/02/2011, 11:54

Hola de nuevo,

probé tu código pero no funcionó _cronos2, lo probé en opera y ff
¿Que hace esta parte? img.src = ims.src ==

Saludos

_cronos2 · #9 (**permalink**) 13/02/2011, 12:35

Error de tipeo ;)

Código Javascript:

Ver originalfunction cambiarFoto(img){
 img.src = img.src == 'foto.jpg' ? 'imagen.jpg' : 'foto.jpg';
 document.getElementById('oculto').value = document.getElementById('oculto').value == 'no' ? 'si' :'no';
}

Esta línea:

Cita:

img.src = img.src == 'foto.jpg' ? 'imagen.jpg' : 'foto.jpg';

equivale a:

Cita:

if(img.src== 'foto.jpg'){
img.src = 'imagen.jpg';
}else{
img.src = 'foto.jpg';
}

Saludos (:

erxaca · #10 (**permalink**) 13/02/2011, 13:35

Gracias por responder ;)

ya probé de antemano ese pequeño error, pero igualmente no me funciona te dejo el código si quieres comprobarlo

Código PHP:

  <html> 
<head> 
  <link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen" /> 
  <script type="text/javascript" src="js/cambio-imagen.js"></script> 
  <script type="text/javascript"> 
    function cambiarFoto(img){ 
      img.src = img.src == 'images/pizzas-off.png' ? 'images/pizzas-on.png' : 'images/pizzas-off.png'; 
      document.getElementById('oculto').value = document.getElementById('oculto').value == 'no' ? 'si' :'no'; 
    } 
  </script> 
</head> 
<body> 
  <img src="images/pizzas-off.png" name="pizzas" onclick="cambiarFoto(this);" /> 
  <input type='hidden' name='oculto' id='oculto' value='no' /> 
</body> 
</html>

_cronos2 · #11 (**permalink**) 13/02/2011, 13:38

¿Qué te dice la consola de errores?

erxaca · #12 (**permalink**) 13/02/2011, 14:02

no arroja ningún tipo de error

_cronos2 · #13 (**permalink**) 13/02/2011, 14:35

Acabo de probarlo y sí me funciona

Asegúrate de que las rutas de las imágenes son correctas y de que no falla lo que pueda fallar XD
Saludos (:

erxaca · #14 (**permalink**) 14/02/2011, 11:02

Si se cambia la primera vez, no sé que error tendría, pero al segundo click ya no cambia, ¿a que se debe?

Saludos

erxaca · #15 (**permalink**) 15/02/2011, 11:39

como sería el código javascript para que al onclick ademas de cambiarse la primera vez, lo haga tantas veces como clicks se de?

Gracias de antemano ;)

Saludos

erxaca · #16 (**permalink**) 15/02/2011, 14:05

como podría hacer para que me tomara el name del input al que se le hace click?, en lugar de indicarselo que lo reciba, en este ejemplo solo recibiría el value de oculto, pero y para que coja el name sin necesidad de indicarselo?:

Código PHP:

    <script type="text/javascript"> 
    function cambiarFoto(img){ 
      img.src = img.src == 'pizzas-off.png' ? 'pizzas-off.png' : 'pizzas-on.png'; 
      document.getElementById('oculto').value = document.getElementById('oculto').value == 'no' ? 'si' :'no'; 
    } 
  </script>

Saludos