click a una imagen

[visona]

Hola a todos,
¿Como podria hacer para que cuando se haga click en una imagen, me pase el valor a un campo oculto?
Un saludo

[Alun]

con el manejador onClick:

<img src="..." onClick="el código js que quieras que ejecute">

Suerte

[visona]

No lo entiendo bien, te coloco lo que tengo a ver si me sacas de la duda

Código PHP:

 <img src="<?php echo $row_regalos['img_regalos']; ?>" alt="" name="dd" width="65" height="65" id="<?php echo $row_regalos['id_imgregalos']; ?>" />  

de aqui saco la imagen y su ID.
Ahora al darle un click le tengo que meter el valor a un campo que esta dentro del formulario que se llama "imagen_id"
Es lo que no se hacer.
Gracias

[ArturoGallegos]

El se refería a que al dar clic en la imagen mandaras llamar un evento (función) de javascript
Por ejemplo

Código HTML:

<img src="imagen.jpg" onclick="funcionX();" />
 

Y en un js

Código Javascript:

function funcionX (){
    document.formulario.campooculto.value = "valor";
}
 

[visona]

sigo sin enterarme, si no es mucho pedir, me podrias pasar el codigo completo?
EN JS estoy muy verde y me resulta imposible saber que colocar en los campos.
Un saludo y gracias

[Alun]

A ver:

Primero, tienes que crear el campo oculto, por ejemplo, un text:

<input type="text" id="oculto" style="display:none;">

con display:none ocultas el campo

Luego, la imagen, con el manejador:

<img src="imagen.jpg" onClick="pasarValor();">

onClick llamará a la función que le digas, en este caso, pasarValor()

Ahora, creas el script con la función:

<script type="javascript">
<!--
function pasarValor(){document.getElementById('oculto').val ue= "";/*aquí debes poner el valor que quieres*/}
</script>

con esto último, la función se encarga de pasarle el valor a ese campo.

[visona]

ya lo voy pillando, pero...
El valor esta en la imagen, quiero decir, que cuando hago click en la imagen, es el id de la imagen el que quiero, aqui segun puedo entender es el campo "oculto" el que tiene el valor.
aqui explico un poco a ver si estoy en lo cierto.

Código PHP:

     <?php do { ?> 
        <img src="<?php echo $row_regalos['img_regalos']; ?>" onClick="pasarValor();"; "alt="" name="dd" width="65" height="65" id="[COLOR="Red"]<?php echo $row_regalos['id_imgregalos']; ?>[/COLOR]"  /> 
      &nbsp;&nbsp;&nbsp; 
      <?php } while ($row_regalos = mysql_fetch_assoc($regalos)); ?></td></tr></table>  

Aqui cojo todas las imagenes de la BB.DD. en rojo el id que me interesa.

ese valor "el rojo" es el que quiero meter dentro del campo "oculto" en esta consulta hay 8 imagenes.

Un saludo

[Alun]

no se si esto te servirá, porque de php no entiendo demasiado... aún, pero puedes sustituir mi comentario así:

document.getElementById('oculto').value= "";/*aquí debes poner el valor que quieres*/

por

document.getElementById('oculto').value= document.getElementById('oculto').src;

De todas formas, ya te digo que no se si va a ser así o no... al menos pruébalo. Suerte

[ArturoGallegos]

Yo no sé mucho de PHP + mysql y no sabría como hacerlo, espero que tu si… necesitas que php te inserte las imágenes con un formato como este:

Código HTML:

<img src="/img/imagen01.jpg" id="imagen01" onclick="PasarId('imagen01');" />
 

Siendo dinámico -> src, id y onclick

y en un js

Código Javascript:

function PasarId(id){
        var imgselect = document.getElementById(id);
        document.getElementById(micampooculto).value = imgselect;
    }
 

de esta forma solo insertas una funcion javascript

[visona]

Pues no deja de funcionar bien

Código PHP:

 onclick="PasarId('<?php echo $row_regalos['id_imgregalos']; ?>');"  

esta funcion funciona bien, ya que en el debuger de firefox, me da los datos correctos.
Pero me dice que "pasarId" no esta definida.

Código PHP:

  <script type="javascript"> 
function PasarId(){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
    } 
    </script>  
  

Pero tampoco se como definirla, para que me la pase al campo "img" que es donde quiero el dato de la funcion "onclick".
a ver si alguien me puede sacar de la duda.
Un saludo

[ArturoGallegos]

en el javascript esta incompleto debe ser
function PasarId(id){

(id) -> no la reemplases asi colocala

[visona]

Me da error."Se esperaba un objeto"

[visona]

Me da error."Se esperaba un objeto"
esto es lo que me da el debug
"PasarId is not defined
function onclick(event) { PasarId("6"); }()1 (línea 2)
[Break on this error] PasarId("6");"
Pero no me mete nada en el campo de texto "img"

[osvier]

Iniciado por visona

Código PHP:

  <script type="javascript"> 
function PasarId(){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
    } 
    </script>  
  

como Ag666 puso anteriormente:

Código Javascript:

function PasarId(id){
 

[osvier]

cuando pones

Código Javascript:

function pasarId(id)
 

estas declarando una funcion, como en otros lenguajes de programacion, dentro de los parentesis defines los parametros que recibe esta funcion, (id es como una variable que recibe la funcion)

[visona]

esto es lo que tengo ahora mismo

Código PHP:

  <script type="javascript"> 
function PasarId(id){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
    } 
    </script>  
  

y este es el evento en la imagen

Código PHP:

 <img src="<?php echo $row_regalos['img_regalos']; ?>"  alt="<?php echo $row_regalos['id_imgregalos']; ?>" name="dd" width="65" height="65" id="<?php echo $row_regalos['id_imgregalos']; ?>" onclick="PasarId('<?php echo $row_regalos['id_imgregalos']; ?>');"  />  

y este es el campo de texto

Código PHP:

  <input name="img" type="text" id="img" >  
   

Pues cuando aprieto la imagen me dice lo que he comentado. Creo que lo tengo bien.

[osvier]

No se si por ahi este el error pero checa esto:

Abre tu pagina en tu browser, y busca una opcion para ver el codigo HTML generado... en IE dale click derecho y selecciona la opcion "Ver codigo fuente"

ya que tengas el codigo fuente abierto, busca el id de tu imagen... y revisa que no haya otro elemento con el mismo id...

[visona]

Esto es lo que me da el codigo fuente...

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
 
 
<link href="../css/regalo.css" rel="stylesheet" type="text/css" /> 
</head> 
 
<body class="fondo"> 
<div class="nada" id="nada">¡Enviale un regalo y gana su atención!</div> 
<div class="fondo" id="fondo"> 
<div class="fondo" id="fondo1"> 
 
  <form id="form1" name="form1" method="post" action=""> 
     <table> 
       <tr> 
        
      <td> 
       
        <script type="javascript"> 
function PasarId(id){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
        return $row_regalos['id_imgregalos']; 
    } 
     
    </script> 
        <img src="../images/regalos/beso.png"  alt="1" name="dd" width="65" height="65" id="1" onclick=PasarId('1');  /> 
      &nbsp;&nbsp;1&nbsp; 
      <script type="javascript"> 
function PasarId(id){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
        return $row_regalos['id_imgregalos']; 
    } 
     
    </script> 
 
        <img src="../images/regalos/rosa.png"  alt="2" name="dd" width="65" height="65" id="2" onclick=PasarId('2');  /> 
      &nbsp;&nbsp;2&nbsp; 
      <script type="javascript"> 
function PasarId(id){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
        return $row_regalos['id_imgregalos']; 
    } 
     
    </script> 
        <img src="../images/regalos/bombones.png"  alt="3" name="dd" width="65" height="65" id="3" onclick=PasarId('3');  /> 
      &nbsp;&nbsp;3&nbsp; 
      <script type="javascript"> 
function PasarId(id){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
        return $row_regalos['id_imgregalos']; 
    } 
     
    </script> 
        <img src="../images/regalos/carta.png"  alt="4" name="dd" width="65" height="65" id="4" onclick=PasarId('4');  /> 
 
      &nbsp;&nbsp;4&nbsp; 
      <script type="javascript"> 
function PasarId(id){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
        return $row_regalos['id_imgregalos']; 
    } 
     
    </script> 
        <img src="../images/regalos/cereza.png"  alt="5" name="dd" width="65" height="65" id="5" onclick=PasarId('5');  /> 
      &nbsp;&nbsp;5&nbsp; 
      <script type="javascript"> 
function PasarId(id){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
        return $row_regalos['id_imgregalos']; 
    } 
     
    </script> 
        <img src="../images/regalos/flores.png"  alt="6" name="dd" width="65" height="65" id="6" onclick=PasarId('6');  /> 
      &nbsp;&nbsp;6&nbsp; 
 
      </td></tr></table> 
     
<p>Tu comentario 
  <label> 
    <input name="img" type="text" id="img" > 
  </label> 
</p> 
    <p> 
      <label> 
        <textarea name="comentario" id="comentario" cols="45" rows="5"></textarea> 
 
      </label> 
    </p> 
    <p> 
      <label> 
        <input type="submit" name="button" id="button" value="Regalar" /> 
      </label> 
    </p> 
  </form> 
</div> 
 
</div> 
</body> 
</html>  
  

[ArturoGallegos]

para que usas el return ?

el codigo que te dije se inserta una sola vez por pagina, tu lo has insertado una vez por cada imagen

aparte de eso no veo nada raro jeje igual ando a las carreras, mas tarde me hecho otra checada mas a fondo

[visona]

El return lo he colocado por que he leido que necesitaba un return. Estoy intentando ver como hacerlo funcionar sin molestar mucho, pero no lo consigo.
he modificado el codigo ahora me da esto

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
 
<script type="javascript"> 
function PasarId(id){ 
        var imgselect = document.getElementById(id); 
        document.getElementById(img).value = imgselect; 
         
    } 
     
    </script> 
<link href="../css/regalo.css" rel="stylesheet" type="text/css" /> 
</head> 
 
<body class="fondo"> 
<div class="nada" id="nada">¡Enviale un regalo y gana su atención!</div> 
<div class="fondo" id="fondo"> 
 
<div class="fondo" id="fondo1"> 
  <form id="form1" name="form1" method="post" action=""> 
     <table> 
       <tr> 
        
      <td> 
       
         
        <img src="../images/regalos/beso.png"  alt="1" name="dd" width="65" height="65" id="1" onclick=PasarId('1');  /> 
      &nbsp;&nbsp;1&nbsp; 
       
        <img src="../images/regalos/rosa.png"  alt="2" name="dd" width="65" height="65" id="2" onclick=PasarId('2');  /> 
      &nbsp;&nbsp;2&nbsp; 
 
       
        <img src="../images/regalos/bombones.png"  alt="3" name="dd" width="65" height="65" id="3" onclick=PasarId('3');  /> 
      &nbsp;&nbsp;3&nbsp; 
       
        <img src="../images/regalos/carta.png"  alt="4" name="dd" width="65" height="65" id="4" onclick=PasarId('4');  /> 
      &nbsp;&nbsp;4&nbsp; 
       
        <img src="../images/regalos/cereza.png"  alt="5" name="dd" width="65" height="65" id="5" onclick=PasarId('5');  /> 
      &nbsp;&nbsp;5&nbsp; 
       
        <img src="../images/regalos/flores.png"  alt="6" name="dd" width="65" height="65" id="6" onclick=PasarId('6');  /> 
 
      &nbsp;&nbsp;6&nbsp; 
      </td></tr></table> 
     
<p>Tu comentario 
  <label> 
    <input name="img" type="text" id="img" > 
  </label> 
</p> 
    <p> 
      <label> 
 
        <textarea name="comentario" id="comentario" cols="45" rows="5"></textarea> 
      </label> 
    </p> 
    <p> 
      <label> 
        <input type="submit" name="button" id="button" value="Regalar" /> 
      </label> 
    </p> 
 
  </form> 
</div> 
</div> 
</body> 
</html>  
  

Pero me da el mismo error

Código PHP:

  PasarId is not defined 
function onclick(event) { PasarId("5"); }()1 (línea 2) 
[Break on this error] PasarId("5");  
   

A ver si con esto te oriento mejor.
Gracias

[osvier]

Primero...

Código Javascript:

<script type="text/javascript">
 

Despues en cada imagen agrega las comillas del evento onchage

Código HTML:

onclick="PasarId('1');"
 

[osvier]

Otro cambio a tu funcion:

Código Javascript:

function PasarId(id){
     
        var imgselect = document.getElementById(id); 
 
        document.getElementById("img").value = imgselect.src; 
         return true;
 }
 

* poner entre comillas "img"
* asignar al campo la propiedad source de la imagen

[visona]

Sigue igual, mismo error

[osvier]

si no es mucha molestia.. podrías pegar de nuevo tu html generado??

estoy corriendo una versión con los cambios que te dije y no me da ningun error...

[visona]

Ya he conseguido que fucnione, el problema estaba en que en el link de la imagen en NAME yo tenia puesto "dd" cuando deberia de ser "id" solucionado Pero una cosa, por que me sale el link y no me sale el ID?

[visona]

Una ultima pregunta para finalizar este tema.
Como puedo asignarle un CSS a la imagen que se haya clicado?

[ArturoGallegos]

agrega una linea mas

Código Javascript:

function PasarId(id){
              var imgselect = document.getElementById(id);
              document.getElementById('img').value = imgselect.src;
              imgselect.className = 'imgselecionada';
               return true;
       }
 

y te sale el link en lugar de la id por esta linea
document.getElementById("img").value = imgselect.src;

[osvier]

Código Javascript:

<script type="javascript"> 
          function PasarId(id){ 
               document.getElementById("img").value = id; 
          } 
</script>
 

[visona]

Otra cosilla, al apliacar el CSS, o sea al hacer el click, me aplica el CSS, pero si marco otra imagen, tambien me la seleciona. Como se hace para que cuando selecciones una imagen, me deseleccione la anterior?.
Gracias de nuevo y muchas gracias por vuestra ayuda