Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/12/2009, 10:32
radge
 
Fecha de Ingreso: enero-2004
Ubicación: here I Am
Mensajes: 437
Antigüedad: 20 años, 2 meses
Puntos: 1
Mostrar DIV al pasar por encima (PHP + JS)

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
__________________
Nuevo foro sobr el mundo del motor - Renault foro
http://www.renaultforo.com