El codigo seria algo asi
Código:
<script type="text/javascript"> <!-- //Funcion que muestra el div en la posicion del mouse function showdiv(event) { //determina un margen de pixels del div al raton margin=5; //La variable IE determina si estamos utilizando IE var IE = document.all?true:false; //Si no utilizamos IE capturamos el evento del mouse if (!IE) document.captureEvents(Event.MOUSEMOVE) var tempX = 0; var tempY = 0; if(IE) { //para IE tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; }else{ //para netscape tempX = event.pageX; tempY = event.pageY; } if (tempX < 0){tempX = 0;} if (tempY < 0){tempY = 0;} //modificamos el valor del id "posicion" para indicar la posicion del mouse document.getElementById('posicion').innerHTML="PosX = "+tempX+" | PosY = "+tempY; document.getElementById('flotante').style.top = (tempY+margin); document.getElementById('flotante').style.left = (tempX+margin); document.getElementById('flotante').style.display='block'; return; } </script> <style type="text/css"> /*order ok: link,visited,hover,active*/ A:link, A:visited, A:hover, A:active{color:#0000ff;} #flotante { position: absolute; display:none; font-family:Arial; font-size:0.8em; border:1px solid #808080; background-color:#f1f1f1; } </style>
Luego creo la tabla mediante los datos que recojo de una consulta SQL
Código PHP:
$pedidos = "Select ...";
while ($row=mysql_fetch_array($pedidos))
{
//Creo una DIV por cada registro
echo'<div id=flotante>
'.$row[CODiGOCLIENTE].'
<br /><span id="posicion"></span>
</div>';
//Creo el link al pasar por encima que salga la tabla
echo"<a href='#' onmouseover=\"showdiv(event);\" onmousemove=\"showdiv(event);\"
onmouseout=\"javascript:document.getElementById('flotante').style.display='none';\">
$row[NOMBRE] $row[APELLIDO1]</a>";
}
Claro si tengo 5 linias me generará 5 div's , por ejemplo con estos registros "CODIGO1,CODIGO2,..." y si miro el codigo HTML estan las 5 div's creadas pero claro con el mismo nombre "flotante" por lo tanto siempre muestra la primera.
Espero haverme explicado.
salu2 radge