Mostrar texto al pasar raton por encima de una imagen

[atoleon]

Hola

Estoy tratando de generar un script que haga que al pasar el ratón por encima de una imagen, aparezca un div con información sobre la imagen en cuestión.
En principio con jquery, aunque soy bastante novato, lo he conseguido hacer fácilmente con la funcion .show. Simplemente pongo la capa con información en hidden y cuando paso el ratón por encima lo pongo visible.
El problema está en que si tengo varias imágenes, tendría que crear una función para cada imagen especificando su selector. Me imagino que debe haber una manera para que con la misma función, cada imagen muestre su propia información.

A ver si alguien puede indicarme el camino a seguir.

Saludos y gracias a todos.

[chuidiang]

Hola:

jQuery tiene $(document).tooltip() que añade tooltips a todos los elementos que tengan "title" como atributo. Por ejemplo

Código HTML:

<img src="xxxx" title="texto a mostrar" ....
 

Si sólo lo quieres en determinados elementos, puedes bien colocar title solo en esos elementos o puedes poner el selector de jQuery que quieras, por ejemplo $('img').tooltip()

Eso quedaría como una "ventanita" flotante, no sé si es exactamente lo que quieres. Si prefieres que salga el div que ya tienes, si has añadido el onmouseover, mouseenter o lo que sea con jquery, dentro de tu función handler/callback el this será la imagen, así que podrías obtener el id correspondiente a esa imagen para tratar de componer el id del div correspondiente. Por ejemplo, si pones id a tus imagenes estilo imagen1, imagen2, imagen3 y los div correspondientes tienen id div1, div2, div3, con un poco de manejo de strings en javascript te resultará fácil obtener "divx" a partir de "imagenx".

El código puede parecerse a esto (pongo de memoria, tendrás que revisar/ajustar)

Código Javascript:

$('img').mouseover( function () {
   var idImagen = $(this).id;    
   var idDiv = idImagen.replace('imagen','div');  // suponiendo imagen1,imagen2... y div1,div2...
   $('#'+idDiv).show();
});
 

Se bueno.

[atoleon]

Muchas gracias Chuidiang, ese segundo script creo que es exactamente lo que buscaba.

Muchas gracias, por la ayuda.

[atoleon]

Esta sentencia devuelve undefinded:

Código Javascript:

var idImagen = $(this).id;
 

he probado con

Código Javascript:

$(this).attr('id');
 

pero también devuelve undefinded

[chuidiang]

Te comenté que lo ponía de memoria, es this.id, sin el $()

Se bueno.

[IsaBelM]

eso en realidad, hoy en día, se hace con puro css. son tooltips. esto es algo mas complicado de lo que tú pretendes, pero la idea es esa

[atoleon]

No me malinterpretes, Chidiang, sólo lo puse para ver si alguien me daba la solución pero ya lo he conseguido. De hecho ya lo tengo todo completo y funcionando y mil gracias a ti y a todos los que han aportado.
Gracias a lo que pusiste pude empezar a ver la luz, sólo tuve que excavar un poco más.

muchas gracias de nuevo. Al final me ha quedado así:

Código Javascript:

$(document).ready(function(){
           /**/
            $('a').mouseover(function(evento){
                var idImagen = $(this).attr('id');
                $('#info' + idImagen).show();
            }).mouseout(function(evento){
                $('.infoAnuncio').hide();
            });
        });