Efecto Texto en cuadro al pasar Mouse sobre Imagen

[datcom]

Buenas
Como logro este efecto?

Es una especie de cuadro que aparece al pasar el mouse sobre una imagen.
Pueden verlo en esta web en la parte inferior derecha sobre la imagen "ISO

http://www.mpgamestudio.com/en/

[djaevi]

en si es un div que esta oculto con esa imagen de fondo, necesitas mas q nada photoshop para darle el estilo que desees y css, mira aqui en esta imagen donde esta marcado seguramente sea el div que contiene la imagen:

Uploaded with ImageShack.us

Lo que debes hacer es crear el div, la imagen y ponersela de fondo, y para lograr el efecto puedes usar los fades de jquery

Código Javascript:

$("#imagenIso").bind("mouseover",fadeIn($("#divOculto"));
$("#imagenIso").bind("mouseout",fadeOut($("#divOculto"));
 

Saludos

[cristian_cena]

El efecto se conoce como "tooltip".
http://jquerytools.org/demos/tooltip/index.html

[datcom]

Iniciado por djaevi

en si es un div que esta oculto con esa imagen de fondo, necesitas mas q nada photoshop para darle el estilo que desees y css, mira aqui en esta imagen donde esta marcado seguramente sea el div que contiene la imagen:

Uploaded with ImageShack.us

Lo que debes hacer es crear el div, la imagen y ponersela de fondo, y para lograr el efecto puedes usar los fades de jquery

Código Javascript:

$("#imagenIso").bind("mouseover",fadeIn($("#divOculto"));
$("#imagenIso").bind("mouseout",fadeOut($("#divOculto"));
 

Saludos

Entiendo pero, pongamosle yo creo el div con su imagen de fondo y bla...
Tendria que ubicarlo ya en el lugar que apareceria no?, digo estaria flotando sobre el contenido que aparecera.

Me cuesta un poco materializarlo el asunto haber si me ayudan.
Gracias

[djaevi]

Exacto lo que te convendria es ponerlo de principio visible al div que deseas desaparecer y aparecer, ubicarlo bien en donde desees para tenerlo ya preparado. En si es una capa y como tal iria superpuesta asi como las capas de photoshop, arriba del fondo en el lugar que tu desees, una vez que ya lo has logrado colocar con los css en su lugar, ponle en sus estilos, display:none; luego asignando las lineas esas de jquery ya todo quedaria listo.

si tienes mas dudas me avisas

Saludos

[IsaBelM]

Iniciado por datcom

Entiendo pero, pongamosle yo creo el div con su imagen de fondo y bla...
Tendria que ubicarlo ya en el lugar que apareceria no?, digo estaria flotando sobre el contenido que aparecera.

Me cuesta un poco materializarlo el asunto haber si me ayudan.
Gracias

lastima que no le hayas hecho ni p*** caso a la respuesta de cristian_cena

[djaevi]

Es cierto no conozco los tooltip pero si es una utilidad de jquery diseñada especialmente para hacer lo que necesites quizas te sea de utilidad revisar su enlace, perdon me olvide de comentar esto

[datcom]

barbaro chicos!, investigare los tooltip!
Gracias

[IsaBelM]

a ver, yo no soy una defensora de jquery. lo que me molesta a no mas poder es que alguien, en este caso cristian_cena, se tome interés por un problema, use su tiempo en leerlo y contestarlo. y la respuesta que reciba es indiferencia.

quizás es que llevo unos días cruzada y veo gigantes donde solo hay molinos.

y ya por último, para aportar algo, una recomendación; hazlo con css. de ese modo te evitas la dependencia de que el usuario tenga o no activado javascript

[miri_02]

Iniciado por cristian_cena

El efecto se conoce como "tooltip".
[url]http://jquerytools.org/demos/tooltip/index.html[/url]

Dos años después encontre este tema y quise dirigirme a la página que comenta cristian_cena pero no tuve éxito en poder abrirla.

Aquí dejo otro link del tooltip de JQuery que muestra un cuadro de texto al pasar el mouse sobre una imagen.

http://jquerytools.github.io/demos/tooltip/any-html.html


Saludos!