funciones.js
Código:
pagina.htmladdEvent(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;
}
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>
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
}
?> 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>';
}
}
Mil gracias por todo de antemano y saludos.
Marx.
