mostrar información al pasar sobre enlace

[Markgus]

Hola no se si esto se pueda me dan una idea?
como puedo hacer que al pasar por un link se muestre información de una tabla mysql

tengo una pagina con unas imágenes que al ingresar a ellas contienen archivos que están guardados en una base de datos

me gustaría que al pasar el mouse por la imagen muestre las ultimas actualizaciones de la tabla mysql
algo así como con el alt, que es como tengo ahorita, pero en lugar de que me muestre simple texto, pues mostrara alguna información extraída de una tabla

se puede esto y pues como lo haria?

gracias

[OsSk4R]

se puede esto y pues como lo haria?

Sí, se puede. Yo una vez (hace tiempo) lo hice usando una libreria de jQuery que al pasar el raton sobre una imagen te mostraba información de la misma. Lo que hice fue coger y en dónde mostraba la información realice una consulta a la tabla y listo :)

Ya tienes la idea. Como ves es fácil. Ahora investiga

[Malekith]

Eso se puede hacer agregando un estilo css al enlace, el cual mediante php asocie la id del enlace, a la de una descripcion o lo que quieras que muestre.

Lo que lleva trabajo en esta ocasion, no es el php, sino el css, ya que tienes que hacer una clase para el enlace, con un :hover que indica que hacer cuando el cursor esta encima.

Espero haberte orientado un poco, busca en el foro de css, ahi encontraras algo seguro.

Un saludo

[Raziel_Ravenheart]

Lo que quieres solo se va a poder hacer básicamente con html, css y javascript, no hay otro modo, ya que obligatoriamente vas a necesitar manipular el evento "onmouseover" que es el que va a permitir que se vea el tooltip cuando se pase el mouse por encima de la imagen.

Revisa esto:
http://www.hongkiat.com/blog/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials/
Está en ingles, y si es lo que necesitas
puedes utilizarlo pero de todos modos es recomendable que aprendas sobre css, html, javascript y ajax.
Si puedes utilizarlos sin aprender nada de eso bn por ti

Te dejo enlaces para que estudies sobre todo:

www.w3schools.com (ingles)
www.librosweb.es (español)
http://www.htmlya.com.ar/
http://www.cssya.com.ar/
http://www.javascriptya.com.ar/
http://www.ajaxya.com.ar/

Y como dice Malekith, tmbn se hace con ayuda de php. Obviamente así accedes a la información en la base de datos

[Markgus]

gracias Ossk4r y Malekith me parece buena la idea del jquery espero no batallar la conexion y pues lo del css si me llevaría tiempo el CCS heusado cascadas pero no son mi fuerte pero me parece buena tu opcion

y pues Raziel si se me ocurrio con el javascript el mouseover, pero necesito mostrar informacion del msyql

gracias por los enlaces pero creo que están de mas yo he estudiado esas paginas bueno aunque solo he terminado el de javascriptya con todo y ejemplos, si vengo aquí es porque espero que me den una idea de como hacerlo como lo hicieron Ossk4r y Malekith

Te dejo enlaces para que estudies sobre todo:

[Malekith]

Por cierto, te dije css, pero para hacerlo de la forma q te dije, deberas usar una libreria como te dijo ossk4r.

El css es para darle un poco de formato al texto q te muestre al pasar el puntero por encima, pero lo que hace que ese texto aparezca, es la libreria.

O al menos yo desconozco que solo con css se pueda hacer todo eso.

Un saludo

[edufal]

pero el lo que quiere es mostrar una informacion proviniente de una tabla en mysql, para eso no necesita ya meter codigo de lado servidor? por ejemplo php? (aclarenmelo, no sé)

[OsSk4R]

Iniciado por edufal

pero el lo que quiere es mostrar una informacion proviniente de una tabla en mysql, para eso no necesita ya meter codigo de lado servidor? por ejemplo php? (aclarenmelo, no sé)

Sí sí, necesita usar PHP, lo que sucede es que para conseguir el efecto ese de que al pasar el ratón por la imagen le mostrara información de la misma, para eso puede debe utilizar jQuery o directamente javascript entre otros.

[Markgus]

si tienen razón la verdad no me agrado que movieran el tema hacia acá por que como dice edufal necesito meter código del lado del servidor
puse la etiqueta del javascript intentando evitar eso porque sabia que afuerzas necesitaría javascript pero subi el tema en php porque necesito mostrar info del mysql que tambien puse la etiqueta, bueno al parecer las etiquetas no importan

al parecer me pueden ayudar más acá del lado del cliente, bueno seguire intentado vi unos ejemplos con el jquery, los probare y les comentare las dudas o si sale
Gracias

[deloriaz]

ahora es cuando entro yo, que no tengo ni idea... a ver si alguien me puede echar un cable que llevo muuucho tiempo intentando hacer esto y no lo consigo, pero intuyo, que para alguien que sepa, es pan comido.

Tengo una página que contiene imágenes que funcionan como enlaces, tomadas de una base de datos. Lo que quiero hacer es que al pasar el ratón sobre la imagen me muestre el título del proyecto (cada imagen corresponde a un proyecto) que está en la base de datos también.

De momento lo único que he sabido hacer es que al pasar el ratón, la imagen se desvanezca:

Código:

<head>
...
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
...
</head>

Código PHP:

 <body>
...
<?php
 
$connexio=mysql_connect("localhost","xxxx","xxxx");
mysql_select_db("xxxx",$connexio);
$consulta="SELECT * FROM proyectos ORDER BY id_proyecto DESC";
$resultat=mysql_query($consulta);
 
while ($fila=mysql_fetch_assoc($resultat)) {
echo "<a href=\"videos.php?id_proyecto=".$fila["id_proyecto"]." \"><img class=\"mini\" src=\"../images/".$fila["imagen_mini"]." \" alt=\" ".$fila["nombre_proyecto"]." \" title=\" ".$fila["nombre_proyecto"]." \" onmouseover=\"MM_effectAppearFade(this, 200, 100, 30, false)\" onmouseout=\"MM_effectAppearFade(this, 200, 30, 100, false)\" /></a>";
}
?>
...
</body>  

lo que quiero hacer es algo así:

[URL="http://www.caleidoscopiostudio.com/"]http://www.caleidoscopiostudio.com/[/URL]

mi problema es que de momento sólo se algo de CSS y HTML, cuando habláis de jQuery y javascript me pongo a temblar... si alguien tiene la paciencia suficiente, podría explicarme como hacerlo? yo de momento voy leyéndome manuales de javascript y hurgando en los códigos de otros a ver si consigo aprender algo.

mil gracias a los que puedan ayudarme!

[mariomon17]

El efecto de tooltip se puede lograr solo con CSS, sin necesidad de JS.

Pero no me ha quedado claro que quieres hacer por que hay dos opciones:
- Cargar todas tus imagenes, y en un div la informacion de la BD que obtienes con un lenguaje server-side.
- Cargar tus imagenes y al pasar el raton cargar la informacion (solo de esa imagen) asincronicamente, por AJAX. Aqui necesitariamos tanto JS para AJAX como php.

Un saludo :)

[deloriaz]

uff, a ver si se explicarme un poco mejor, porque he estado echando un vistazo a lo de tooltip y no es exactamente lo que quiero.

Creo que lo que quiero es la segunda opción que me dices...

En la base de datos he subido proyectos y cada proyecto tiene una miniatura, un título, una descripción y más datos.

En la home del sitio, por medio del php que publiqué en mi post anterior, subo las miniaturas de cada proyecto. He conseguido que al hacer mouseover sobre las miniaturas, se desvanezcan, individualmente claro, no todas a la vez, cuando ya no está el ratón encima vuelve a la opacidad 100%, pues quiero que al hacer mouseover sobre cada miniatura, encima de ellas, además de desvanecerse la imagen, aparezca la información que tengo en el campo Titulo de la BD, pero no como un globo ni nada parecido, sino como está en esta web [URL="http://www.caleidoscopiostudio.com"]http://www.caleidoscopiostudio.com[/URL] que aparecen los títulos de los proyectos sobre la imagen que se desvanece pero ajustándose al espacio que ocupa la imagen.

Como ya dije, no tengo ni idea de php, pero para esto me pueden ayudar, ni de JS ni ajax, soy novata del todo en el mundo de las webs, pero entiendo que con php puedo llamar al título y que con JS puedo decirle el comportamiento que tiene que hacer la imagen al hacer mouseover... o algo así, no?

gracias!

[mariomon17]

Pues viendo el ejemplo que pasas yo haria la primera opcion, AJAX es una tonteria usarlo aqui.

Tienes que adaptar tu script php para que ademas de mostrar tus imagenes, muestre en un div la otra informacion.
Con CSS ocultamos ese div y cuando le pasamos el raton con hover lo mostramos.

Olvidate de JS.

Un saludo :)

[deloriaz]

muchas gracias mariomon17! intento hacer esto que me dices y comento.

Saludos!