Consulta: cómo enviar una variable con onmouseover

marx-pola · #1 (**permalink**) 21/12/2011, 12:04

Hola a todos! Tengo una página con un listado de productos los cuales al pasar el mouse por arriba quisiera que me muestre en una tooltip parte de la información del producto.

Ahora estaba haciendo pruebillas con este ejemplo. En ambos casos, si le doy Enter, la variable id_producto=32 pasa a la página tooltip.php y me muestra los detalles, peeeero la idea es que al pasar por arriba aparezcan esos detalles en la tooltip.

En la primer opcion (que es lo que quise tratar de que funcione), al pasar el mouse por arriba me tira error en el include.
En la segunda opción simplemente me muestra una foto.

Les muestro el código:

prueba.php

Código PHP:

 
<style type="text/css"> 
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ 
a.tooltips span {display:none; padding:2px 3px; margin-left:8px; width:130px;} 
a.tooltips:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;} 
</style> 
 
</head> 
<body> 
<table width="46%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td height="30" align="center">Haciendo Include <a href="tooltip.php?id_producto=32" class="tooltips">Tooltip<span> 
      <?php include('tooltip.php?id_producto=32') ;?> 
    </span></a>.</td> 
    <td height="30" align="center"> Sobre Imagen <a href="#" class="tooltips">Tooltip<span><img src="tooltip.jpg" /></span></a>.</td> 
  </tr> 
  </table> 
</body> 
</html>

Este es un ejemplo simple y por eso me gustó. Igualmente escucho sugerencias y espero no sea muy complicado lo que quiero hacer.

Gracias y saludos.
Marx

marlanga · #2 (**permalink**) 22/12/2011, 15:20

Puedes hacer dos cosas:
1- Al final del BODY, añadir tantos DIVS como productos estés mostrando en la página, con un ID único. Esos divs comparten un CLASS en común, cuyo estilos CSS lo posicionarán en el centro de la pantalla con el formato que tú quieras, y por supuesto, con su display a none. Cada div contendrá el tooltip de uno de los productos. Cuando pases el ratón por encima de uno de los productos de tu lista, haces que el DIV con el tooltip asociado se muestre en la pantalla. Puedes currarlo un poco más y hacer que aparezca, en vez en el centro de la pantalla, al lado del cursor del ratón, mediante su propiedad TOP y LEFT. Si el listado tiene más de 20 productos, deberías de usar el método de abajo.

2-Sólo añades un DIV al final del todo, cuyo contenido cargarás con AJAX en cuanto se dispare el evento de ratón asociado a cada producto de tu lista. Con javascript haces que ese AJAX haga una petición al mismo href del enlace que tienes dentro del producto en el que tienes el ratón encima.

marx-pola · #3 (**permalink**) 02/01/2012, 08:43

Cita:

2-Sólo añades un DIV al final del todo, cuyo contenido cargarás con AJAX en cuanto se dispare el evento de ratón asociado a cada producto de tu lista. Con javascript haces que ese AJAX haga una petición al mismo href del enlace que tienes dentro del producto en el que tienes el ratón encima.

Perdón por contestar tarde pero con esto tengo una duda... mis resultados muestran 16 productos por página y la idea (o algo parecido) sería hacer algo como esto:
Demo de tooltips

Les pido disculpas de antemano por la ignorancia y por eso preguntaba...

Ya tengo creado un solo DIV con CSS que tiene el formato del tooltip tal cual como quiero que aparezca pero mi problema es cómo pasarle la variable a ese DIV para que aparezca.

Por ejemplo... si el id_producto = 1... ¿cómo se lo paso ó lo envío haciendo un onmouseover o lo que sea para que me muestre el resto de la info en ese tooltip?

Mil perdones nuevamente y paciencia conmigo amigos.

Gracias y Feliz 2010 para todos.
Marx

marlanga · #4 (**permalink**) 02/01/2012, 15:34

Por ejemplo puedes hacer que el PHP, cuando imprima la lista de divs de los productos, en cada div le inserte un
<div..... onmouseover="miFuncion('<?php echo url_del_producto; ?>'">

siendo miFuncion una función en javascript que carga en ese DIV oculto de tooltips la información que se le suministra por AJAX desde la url pasada como argumento.

¿Feliz 2010? Estamos en el 2012 amigo xd.

marx-pola · #5 (**permalink**) 05/01/2012, 06:12

marlanga: muchas gracias por responder.

Cita:

siendo miFuncion una función en javascript que carga en ese DIV oculto de tooltips la información que se le suministra por AJAX desde la url pasada como argumento.

¿Podrías darme aunque sea un pequeño ejemplo por favor? Tengo un lío (y no es Messi) con esto que no doy más.

1000 Gracias.