[SOLUCIONADO] Saber id, class o atributos del elemento sobre el que esta el raton

[neck]

Buenas foreros

Estoy intentando crear una galería de imágenes que se cree cuando se le solicite. Click en elemento de la lista y se habré div donde se cargan todas las imágenes miniaturas que se le pasa por $.getJSON y se crean con $.each. Hasta ahí todo bien, pero el problema lo tengo cuando necesito añadir la funcionalidad de cuandose hace click en la miniatura se carga la imagen completa, quiero hacerlo modificando el atriburo src de un img.

Mi problema esta en, ¿Como puedo hacer es funcionalidad si las imágenes en miniatura se crean dinamicamente?

He pensado en que se detecte el identificador, clase o atributo de la imagen en la cual tengo el puntero encima para detectar de que imagen se esta hablando y a continuación cuando se haga click el la imagen se ejecute la función que cambia el atributo de un img donde se cargue la imagen en grande.

¿Existe algún método en Jquery o JavaScript que detecte sobre que elemento concreto esta el puntero del ratón?


Gracias foreros

[oggy_15_3]

Iniciado por neck

Buenas foreros

Estoy intentando crear una galería de imágenes que se cree cuando se le solicite. Click en elemento de la lista y se habré div donde se cargan todas las imágenes miniaturas que se le pasa por $.getJSON y se crean con $.each. Hasta ahí todo bien, pero el problema lo tengo cuando necesito añadir la funcionalidad de cuandose hace click en la miniatura se carga la imagen completa, quiero hacerlo modificando el atriburo src de un img.

Mi problema esta en, ¿Como puedo hacer es funcionalidad si las imágenes en miniatura se crean dinamicamente?

He pensado en que se detecte el identificador, clase o atributo de la imagen en la cual tengo el puntero encima para detectar de que imagen se esta hablando y a continuación cuando se haga click el la imagen se ejecute la función que cambia el atributo de un img donde se cargue la imagen en grande.

¿Existe algún método en Jquery o JavaScript que detecte sobre que elemento concreto esta el puntero del ratón?


Gracias foreros

Claro que existe.
La pregunta es ¿Cómo creas las imagenes dinámicamente?
Si lo haces así es fácil

Código Javascript:

vad $nuevo_img=$("<img src='..'/>");
$nuevo_img.bind("mouseover",function(){//CUANDO PASAS EL MOUSE SOBRE LA IMG NUEVA
alert('Proceso al pasar el mouse sobre la imagen nueva');
});
$('body').append($nuevo_img);//BODY SERA EL DESTINO DONDE SE CREARA LA IMAGEN EN MINIATURA (REEMPLAZAR POR EL TAG DE DESTINO QUE USAS).
 

[Alexis88]

Puedes tomar al elemento en el que se produjo el evento mediante la propiedad target del objeto del evento, aunque también puedes delegar el evento.

Saludos

[neck]

Gracias oggy_15_3, las imágenes las creo recogiendo las urls de ellas desde un objeto JSON y mi intención es que una vez creadas esas imagenes cuando yo pase el raton sobre cada una de ellas me pueda guardar en una variable el valor del atributo "src" o del "id" para cuando se haga click en la imagen se se ejecute una función que cambien el valor src de una etiqueta IMG creada para ver la imagen en grande.


Gracias también a ti Alexis88, porque por tus enlaces he podido dar mas o menos con lo que quería. He encontrado el metodo .attr() pero la verdad que me estoy comiendo el coco de como implementarlo en un .mouseover().

Sigo buscando y experimentando, haber si me podéis seguir ayudando.

Muchas gracias foreros

[siddartha23]

No es tan complicado, usa el evento hover() de jquery, dentro de la función guardas en una variable var el attr('src') de this, la imagen sobre la que estas, y luego seleccionas la imagen grande que quieres que se actualize y le reemplazas su attr('src', var)...

[sintel_1]

Hola.

Si el elemento a sido creado con jquery no puedes usar la funcion hover()

No entiendo muy bien para que quieres obtener el ID
Yo lo haria de la siguiente manera:

crearia las imagenes dentro de un div identificado
<div id="contenedor"> aqui las imagenes </div>

para obtener el identificador

Código:

$("#contenedor").on('mouseover', 'img', function(){

// obtenemos el id del elemento seleccionado
var identificador = "#" +  $(this).attr("id"); 

// cambiamos el atributo src del elem
$(identificador).attr("src","imagen.jpg");
});

Aunque podriamos olvidarnos del Id y hacer algo asi:

Código:

$("#contenedor").on('mouseover', 'img', function(){
$(this).attr("src","imagen.jpg");
});

Saludos.

[neck]

Hola de nuevo

Gracias Sintel_1 por tu respuesta.

Con tu ayuda he conseguido lo que pretendía. Me has salvado