Tooltip

marx-pola · #1 (**permalink**) 07/10/2011, 08:59

Hola a todos! Tengo un problema con esta tooltip. Estuve probando un ejemplo que bajé de internet y en cada ID le agregué el código del producto que quiero que me muestre dentro de la tooltip y de una manera funciona perfecto pero cuando la llevo e incorporo en mi web junto con las consultas a la bdd ya no funciona. El código que funciona es este:

funciones.js

Código:

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var vec=document.getElementsByTagName('div');
  for(f=0;f<vec.length;f++)
  {
    addEvent(vec[f],'mouseover',mostrarToolTip,false);
    addEvent(vec[f],'mouseout',ocultarToolTip,false);
    addEvent(vec[f],'mousemove',actualizarToolTip,false);
  }
  var ele=document.createElement('div');
  ele.setAttribute('id','divmensaje');
  vec=document.getElementsByTagName('body');
  vec[0].appendChild(ele);

}

function mostrarToolTip(e) 
{

  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if (window.event) 
    e=window.event;
  d.style.left = e.clientX + document.body.scrollLeft - 45;
  d.style.top = e.clientY + document.body.scrollTop + 15;
  var ref;
  if (window.event)
    ref=window.event.srcElement;
  else
    if (e)
      ref=e.target;
  recuperarServidorTooltip(ref.getAttribute('id'));
}

function actualizarToolTip(e) 
{
  if (window.event) 
    e=window.event;
  var d = document.getElementById("divmensaje");
  d.style.left = e.clientX + document.body.scrollLeft - 45;
  d.style.top = e.clientY + document.body.scrollTop + 15;
}


function ocultarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "hidden";
}

var conexion1;
function recuperarServidorTooltip(codigo) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','tooltip.php?id_producto='+codigo, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if(conexion1.readyState == 4)
  {
    d.innerHTML=conexion1.responseText;
  } 
  else 
  {
    d.innerHTML = '<img src="cargando.gif">';
  }
}


//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

pagina.html

Código HTML:

<head>
<style>
#divmensaje {
background-color:#3C3C3C;
width:266px;
height: 350px;
text-align:center;
position: absolute; 
visibility: hidden; 
z-index: 100;
}
#tooltipcentro {
background-color:#3C3C3C;
width:234px;
padding: 17px 0px 0px 0px;
margin:0 auto;
}
#tooltip-foto {
width:234px;
height: 174px;
background-color:#FFF;
text-align:center;
}

/* TEXTOS TOOLTIP */
.tooltip-tit {
font-family: "Arial";
font-size: 11px;
color: #B3B3B3;
vertical-align:bottom;
padding: 6px 0px 4px 0px;
}
.tooltip-cod {
font-family: "Arial";
font-size: 20px;
color: #FFF;
font-weight: bold;
text-align:left;
vertical-align:bottom;
padding: 10px 0px 4px 0px;
}
.tooltip-desc {
font-family: "Arial";
font-size: 11px;
color: #FFF;
text-align:left;
padding: 10px 0px 10px 0px;
}
.tooltip-uni {
font-family: "Arial";
font-size: 16px;
color: #FFF;
font-weight: bold;
text-align:left;
vertical-align:middle;
padding: 4px 0px 0px 0px;
}
.tooltip-precio {
font-family: "Arial";
font-size: 20px;
color: #FF3300;
font-weight: bold;
text-align:right;
vertical-align:top;
padding: 4px 0px 0px 0px;
}

.cuadradito{
background-color: #f00;
height: 50px; 
width: 50px;
margin:3px;
z-index: -1;
}
</style>

<script languaje="javascript" src="funciones.js" type="text/javascript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Entre con el mouse al recuadro.</p><table width="73%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div class="cuadradito" id="22"></div></td>
    <td><div class="cuadradito" id="25"></div></td>
    <td><div class="cuadradito" id="33"></div></td>
    <td><div class="cuadradito" id="120"></div></td>
    <td><div class="cuadradito" id="150"></div></td>
  </tr>
</table>
</body>

tooltip.php

Código PHP:

  <?php

$id_producto = $_GET['id_producto'];

 
    include('conectar.php');

    

    // conexion a la base

    $conexion = mysql_connect($host_db, $usuario_db, $pass_db) or die ("no se ha podido conectar a la BD");

    mysql_select_db($base_db, $conexion) or die ("no se ha podido seleccionar la BD");

 
    $result = mysql_query("SELECT * FROM producto WHERE id_producto = '$id_producto'", $conexion) or die (mysql_error());

 
?>

 
<?php

// Muestro los registros

  while ($registro = @mysql_fetch_array($result))

      { 

?>

<div id="tooltip">

<div id="tooltipcentro">

  <table width="226" border="0" cellspacing="0" cellpadding="0">

    <tr>

      <?php

    $filename = 'imageart/';

    $filename .= $registro['id_producto'];

    $filename .= '.jpg';

      if (file_exists($filename)) {

 
          echo '<td colspan="2"><div id="tooltip-foto"><a href="rpauto-detalle.php?id_producto='.$registro['id_producto'].'&cod_linea='.$registro['cod_linea'].'" target="_top"><img src="'.$filename.'" border="0" /></a></div></td>';

 
        } else {

 
          echo '<td colspan="2"><div id="tooltip-foto"><a href="rpauto-detalle.php?id_producto='.$registro['id_producto'].'&cod_linea='.$registro['cod_linea'].'" target="_top"><img src="../../imageart/noimage.jpg" border="0" /></a></div></td>';

 
        }

    ?>

    </tr>

    <tr>

      <td class="tooltip-cod"><?php echo $registro['cod_articulo']; ?></td>

      <td align="right" class="tooltip-tit">CODIGO ARTICULO</td>

    </tr>

    <tr>

      <td colspan="2" bgcolor="#FFFFFF"><img src="../../imagesite/trans_1x1.gif" width="1" height="1" /></td>

    </tr>

    <tr>

      <td colspan="2" class="tooltip-desc"><?php echo substr(($registro['descripcion']), 0, 80); ?>...</td>

    </tr>

    <tr>

      <td width="117" align="left" class="tooltip-tit">UNIDAD DE COMPRA</td>

      <td width="117" align="right" class="tooltip-tit">PRECIO</td>

    </tr>

    <tr>

      <td colspan="2" bgcolor="#FFFFFF"><img src="../../imagesite/trans_1x1.gif" width="1" height="1" /></td>

    </tr>

    <tr>

      <td class="tooltip-uni"><?php echo $registro['unidad']; ?></td>

      <td class="tooltip-precio">$ <?php echo $registro['precio']; ?></td>

    </tr>

  </table>

</div>

</div>

<?php

  }

?>

Como les decía, así funciona perfecto ya que de pagina.html está tomando los nros. de cada id (22,25,33...) que serían los id de los productos que tengo en mi bdd y mediante javascript pasa a tooltip.php y me muestra lo que hay en la misma.

Al llevar todo esto a mi web la cual esta llena de divs, el problemón es justamente ese, que me toma TODOS los id de los divs y por supuesto ya no funciona.
Creo que tengo que modificar algo de funciones.js pero acudo a uds. porque no tengo idea de como hacerlo.

Lo que quisiera saber es:
- ¿cómo hago para que aparezcan las tooltips solamente al pasar por encima de la imagen que aparece en el resultado de esta consulta?
- ¿cómo le paso estas 2 variables a tooltip.php mediante javascript? Antes le enviaba mediante el id los nros. (22,25...) pero ahora necesitaria pasarle estas dos:

Código PHP:

  $result = mysql_query("SELECT * FROM producto WHERE novedad = '$novedad' ORDER BY cod_linea", $conexion) or die (mysql_error());

 
if (mysql_num_rows($result) > 0) 

{

  while ($registro = mysql_fetch_array($result)) 

{

 
echo '<div id="cont-foto"><a href="rpauto-detalle.php?id_producto='.$registro['id_producto'].'&cod_linea='.$registro['cod_linea'].'" target="_top"><img src="'.$filename.'" border="0" /></a></div>';

}

}

Espero haber sido claro para ver si pueden darme una mano co nesto que ya casi lo tengo terminado y solo me estaría faltando estos detalles.
Mil gracias por todo de antemano y saludos.
Marx.

marx-pola · #2 (**permalink**) 07/10/2011, 11:37

¿Alguna sugerencia, ayuda por favor? Traté de explicarlo lo mejor posible para que se entienda. ;(

Panino5001 · #3 (**permalink**) 07/10/2011, 11:58

Hola, Marx, hay mucho código php y muchos aquí no saben php o no tienen ganas de interpretar qué hace el código.
Lo que puedo decirte es que es un error usar números como valor de atributos id (algunos navegadores no los soportan, más allá de que no es estandar). Y bueno, quizá no interpreté bien que hace tu php, pero no veo los ids numéricos que mostraste en tu primer ejemplo y veo que en realidad vas a ponerle el mismo id a diferentes elementos (eso no sólo no es estandar sino que te generará problemas de varios tipos).

Sería bueno que sólo muestres el código fuente que genera tu php (el que aparece al usar la opción ver código fuente)

marx-pola · #4 (**permalink**) 07/10/2011, 12:37

Panino5001: gracias por responder.

El problema de esto no está en el código PHP, sino en el Javascript. Voy a hacerlo más facil ya que esto me está causando un dolor de cabeza terrible...

Tengo este código javascript:
funciones.js

Código:

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var vec=document.getElementsByTagName('div');
  for(f=0;f<vec.length;f++)
  {
    addEvent(vec[f],'mouseover',mostrarToolTip,false);
    addEvent(vec[f],'mouseout',ocultarToolTip,false);
    addEvent(vec[f],'mousemove',actualizarToolTip,false);
  }
  var ele=document.createElement('div');
  ele.setAttribute('id','divmensaje');
  vec=document.getElementsByTagName('body');
  vec[0].appendChild(ele);

}

function mostrarToolTip(e) 
{

  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if (window.event) 
    e=window.event;
  d.style.left = e.clientX + document.body.scrollLeft - 45;
  d.style.top = e.clientY + document.body.scrollTop + 15;
  var ref;
  if (window.event)
    ref=window.event.srcElement;
  else
    if (e)
      ref=e.target;
  recuperarServidorTooltip(ref.getAttribute('id'));
}

function actualizarToolTip(e) 
{
  if (window.event) 
    e=window.event;
  var d = document.getElementById("divmensaje");
  d.style.left = e.clientX + document.body.scrollLeft - 45;
  d.style.top = e.clientY + document.body.scrollTop + 15;
}


function ocultarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "hidden";
}

var conexion1;
function recuperarServidorTooltip(codigo) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','tooltip.php?id_producto='+codigo, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if(conexion1.readyState == 4)
  {
    d.innerHTML=conexion1.responseText;
  } 
  else 
  {
    d.innerHTML = '<img src="cargando.gif">';
  }
}

Y tengo una página maquetada con varios divs, PERO quiero que me muestra una TOOLTIP con foto y texto al poner el cursor sobre <div id="cont-foto">. La TOOLTIP ya está creada, ya está todo creado pero quiero que el JS haga solo referencia sobre el div cont-foto:

Código HTML:

<div id="contenedor">
  <div id="menuprincipal">
    <div id="listadodeproductos">
       <div id="cont-foto"><img src="UNAFOTODEALGO.jpg" border="0" /></div>
    </div>
  </div>
</div>

¿Qué tengo que modificar en el código JS para que solo tome el div cont-foto y no a todos como actualmente lo está haciendo?

No se pueden imaginar hace cuianto tiempo que estoy dando vueltas con esto.
Gracias a todos nuevamente.

marx-pola · #5 (**permalink**) 07/10/2011, 14:36

Por favor... una manito para este pobre usuario.

Panino5001 · #6 (**permalink**) 08/10/2011, 09:49

Aparentemente estás usando una variable global llamada vec, que contiene los id de los elementos que disparan onmouseover la aparición del tooltip. Lo que debés hacer es colocar dentro de esa variable sólo los id de los elementos que quieras tengan esa funcionalidad. No lo pude testear porque el fragmento de código que colocaste está incompleto

marx-pola · #7 (**permalink**) 11/10/2011, 05:37

Cita:

Iniciado por Panino5001

Aparentemente estás usando una variable global llamada vec, que contiene los id de los elementos que disparan onmouseover la aparición del tooltip. Lo que debés hacer es colocar dentro de esa variable sólo los id de los elementos que quieras tengan esa funcionalidad. No lo pude testear porque el fragmento de código que colocaste está incompleto

Panino5001: Nuevamente gracias por responder. Este es el código completo que estoy utilizando.

Código:

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var vec=document.getElementsByTagName('div');
  for(f=0;f<vec.length;f++)
  {
    addEvent(vec[f],'mouseover',mostrarToolTip,false);
    addEvent(vec[f],'mouseout',ocultarToolTip,false);
    addEvent(vec[f],'mousemove',actualizarToolTip,false);
  }
  var ele=document.createElement('div');
  ele.setAttribute('id','divmensaje');
  vec=document.getElementsByTagName('body');
  vec[0].appendChild(ele);

}

function mostrarToolTip(e) 
{

  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if (window.event) 
    e=window.event;
  d.style.left = e.clientX + document.body.scrollLeft - 45;
  d.style.top = e.clientY + document.body.scrollTop + 15;
  var ref;
  if (window.event)
    ref=window.event.srcElement;
  else
    if (e)
      ref=e.target;
  recuperarServidorTooltip(ref.getAttribute('id'));
}

function actualizarToolTip(e) 
{
  if (window.event) 
    e=window.event;
  var d = document.getElementById("divmensaje");
  d.style.left = e.clientX + document.body.scrollLeft - 45;
  d.style.top = e.clientY + document.body.scrollTop + 15;
}


function ocultarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "hidden";
}

var conexion1;
function recuperarServidorTooltip(codigo) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','tooltip.php?id_producto='+codigo, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if(conexion1.readyState == 4)
  {
    d.innerHTML=conexion1.responseText;
  } 
  else 
  {
    d.innerHTML = '<img src="cargando.gif">';
  }
}


//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

Si me permites, este código lo saqué de acá: Tooltip AJAX
De esta manera estuve tratando de acomodarlo para que funcione en mi web pero no hubo caso.
Muchas gracias por tu tiempo.
MArx.