Comunidad de diseño web y desarrollo en internet online

Variar contenido de campo de un formulario al pasar sobre imagenes

Citar            
MensajeEscrito el 27 Sep 2011 11:42 am
Buenas a todos, explico mas o menos lo que quiero hacer, en esta web ( http://comercialclivema.es/level1/productos.php ) , me gustaría que al pasar el ratón sobre las imágenes de 75x75 de cada categoría, cambiara el contenido de un campo text que esta transparente después de "Calefacción eléctrica" , me gustaría que en el campo del formulario apareciera el title o el alt de la imagen por la que estás pasando, estuve intentándolo con funciones de javascript pero no lo conseguí, seguramente será una tontería pero llevo horas atascado en esto y creo que los arboles ya no me dejan ver el bosque.. XDD.. gracias a todos de antemano.

Por stratovare

6 de clabLevel



 

chrome
Citar            
MensajeEscrito el 28 Sep 2011 06:36 am
La solución a lo que quieres es muy simple ya que veo que utilizas jquery.
lo que podrias hacer es agregarle el atributo class a tus imagenes para poder programarlo en javascript. Aquí un ejemplo:

Código HTML :

<img src="../imag/productos/calefaccion/ecombi.jpg" alt="prueba1" width="75" height="75" border="0" class="imagen_75x75"/>
le agrege el atributo class que es "imagen_75x75"
ahora para poder obtener el atributo alt o title es simplemente asi:

Código Javascript :

$(function(){
   $('.imagen_75x75').mouseover(function(){ //selecciona imagenes que sean clase imagen_75x75
                var texto = $(this).attr('alt'); //obtenemos el valor del atributo alt
      $('#id_campo_texto').val(texto); //asignamos el valor del atributo al campo de texto
   });
});
y eso es todo, espero haberte ayudado

Por zarkiel

Claber

340 de clabLevel

4 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 28 Sep 2011 03:21 pm
Muchas gracias zarkiel, es exactamente lo que yo quería..

Por stratovare

6 de clabLevel



 

chrome
Citar            
MensajeEscrito el 28 Sep 2011 04:17 pm
gracias, abusando de la confianza preguntaré que tengo que hacer para que cuando saque el ratón de las imágenes me quede en blanco el text del formulario. lo hice tal y como me lo sugeriste y le añadí otra parte, te pongo el código completo:

Código ActionScript :

$(function(){ 
   $('.imagen_75x75').mouseover(function(){
         var texto = $(this).attr('title'); //obtenemos el valor del atributo alt 
         $('#texto1').val(texto); //asignamos el valor del atributo al campo de texto 
   }); 
   $('.imagen_75x75_bombas').mouseout(function(){
         var vacio1 = " ";
         $('#texto1').val(vacio1); //asignamos el valor del atributo al campo de texto 
   });
});

Por stratovare

6 de clabLevel



 

chrome
Citar            
MensajeEscrito el 28 Sep 2011 06:06 pm
Tu codigo está perfecto, pero lo que tienes que hacer es utilizar otro evento pero con el mismo nombre de la clase, aquí el código:

Código Javascript :

$(function(){  
   $('.imagen_75x75').mouseover(function(){ 
         var texto = $(this).attr('title'); //obtenemos el valor del atributo alt  
         $('#texto1').val(texto); //asignamos el valor del atributo al campo de texto  
   });  
   $('.imagen_75x75').mouseout(function(){  //utilizamos la misma clase pero con otro evento
         var vacio1 = " "; 
         $('#texto1').val(vacio1); //asignamos el valor del atributo al campo de texto  
   }); 
}); 

Por zarkiel

Claber

340 de clabLevel

4 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Oct 2011 01:15 pm
Gracias zarkiel... listo!

Por stratovare

6 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.