Archivo que despliega los nombres de los registros, para cuando se pase encima con el mouse se muestren los demás datos.
Código PHP:
<?php
session_start();
include('conect.php');
$link=Conectarse();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Búsqueda</title>
<style media="screen">
.hint {
background-color: #EEE;
font-family: verdana,arial,helvetica;
visibility: hidden;
font-size: 8pt;
position: absolute;
padding: 0px;
border: 1px solid #000000;
color: #333;
width: 250px;
text-align:center;
z-index:100;
overflow:hidden;
}
</style>
<script type="text/javascript" src="tooltip.js"></script>
</head>
<body>
<div id="posicion" class="hint"></div><!-- Tooltip-->
<?php
function cambiaf_a_mysql ($fecha){
ereg( "([0-9]{1,2})-([0-9]{1,2})-([0-9]{4})", $fecha, $mifecha);
$lafecha=$mifecha[3]."-".$mifecha[2]."-".$mifecha[1];
return $lafecha;
}
$desde=$_POST['desde'];
$hasta=$_POST['hasta'];
$id_Producto=$_POST['tblproducto'];
$desde=cambiaf_a_mysql($desde);
$hasta=cambiaf_a_mysql($hasta);
/*Consulta
$consulta="select Cantidad, fecha, id_Producto from tblproducciones where fecha BETWEEN '".$desde."' and '".$hasta."' and id_Producto=".$id_Producto;*/
$consulta="select id_Producto, Nombre from tblproducto";
$resCons=mysql_query($consulta);
echo"<h2>Empresas Resultantes:</h2>";
$total=0;
while($row=mysql_fetch_array($resCons))
{?>
<div class="datos" onMouseOver="mOvr(this,'#EBEDEF'); initMovimiento(event); enviarDatos('posicion', 'datos.php', '<?php echo $row['id_Producto'];?>');" onMouseOut="mOvr(this,'#FFFFFF'); cancelar();">
<?php
echo"<b>Empresa</b>: ".$row['Nombre']."<br>";?>
</div>
<br />
<?php
}
?>
</body>
</html>
Archivo js del tooltip y envio de datos por ajax
Código PHP:
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}//Funcion Desarrollada por Jesus Liñán [email protected] ribosomatic.com
//************************************************para la insercion de registros*************************************************
function enviarDatos(divResul, destino, id)
{
//donde se mostrará lo resultados
divResultado = document.getElementById(divResul);
divResultado.innerHTML="<center>Cargando ...</center>";
cadenaFormulario='id='+encodeURI(id);
//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del medotod POST
//archivo que realizará la operacion
//registro.php
ajax.open("POST", destino, true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText;
}
else
{
divResultado.innerHTML="<center>Cargando ...</center>";
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send(cadenaFormulario);
}
//***************************************************************************************************************
function Browser() {
this.isIE = false; // Internet Explorer
this.isNS = false; // Netscape
this.isOpera = false; // Opera
if (navigator.userAgent.indexOf("Netscape6/") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("Gecko") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("MSIE") >=0 && navigator.userAgent.indexOf("Opera") <0) {
this.isIE = true;
return;
}
if (navigator.userAgent.indexOf("Opera") >=0) {
this.isOpera = true;
return;
}
}
var browser = new Browser();
function initMovimiento(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onmousemove", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", getposicion, true);
event.preventDefault();
}
}
function initPulsar(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onclick", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("click", getposicion, true);
event.preventDefault();
}
}
function getposicion(event){
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
if (browser.isOpera) {
x = window.event.clientX + document.documentElement.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop;
}
document.getElementById("posicion").style.visibility = "visible";
document.getElementById("posicion").style.left= (x - 55) +"px";
document.getElementById("posicion").style.top = y + 20 +"px";
//document.getElementById("posicion").innerHTML = "Arrastre para ordenar sus ";
}
function cancelar() {
if (browser.isIE || browser.isOpera) {
document.detachEvent("onmousemove", getposicion);
document.detachEvent("onclick", getposicion);
}
if (browser.isNS ) {
document.removeEventListener("mousemove", getposicion, true);
document.removeEventListener("click", getposicion, true);
}
document.getElementById("posicion").style.visibility= "hidden";
}
//para cambiar el color de fondod de la tabla
function mOvr(obj, color)
{
obj.style.background=color;
}
Archivo que hace la consulta de los demas datos segun el id, que se envia por ajax, devuelve los datos al div del tooltip
Código PHP:
<?php
include('conect.php');
$link=Conectarse();
//variables POST
$id=$_POST['id'];
$sql="select * from tblproducto where id_Producto=".$id;
$resCons=mysql_query($sql);
$row=mysql_fetch_array($resCons);
echo "Cantidad: ".$row['cantidad']."<br>fecha: ".$row['fecha'];
?>
espero te funcione amig@, a mi me funciono a la perfección.
Saludos