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.