Escrito este aquí porque es mitad PHP mitad JS , estoy realizando un grid (tabla) que al pasar por encima de un CAMPO muestra un DIV que genero para cada linia de la tabla.
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