capa se mueve con el raton

chusete · #1 (**permalink**) 13/01/2005, 03:11

tengo una capa y quiero que cada vez que el raton se mueva por encima de ella me aparezca otra capa por encima con un texto explicativo, y que si sigo moviendo el raton por la capa de abajo, la capa de arriba se mueve junto al puntero del raton, como se logra eso?

es como si fuera un title de un enlace pero que yo pueda definir y que se mueva a la vez que el raton

KarlanKas · #2 (**permalink**) 13/01/2005, 03:45

Prueba con esto:

Código HTML:

<html>
<head>

	<style>
	#capota{
	padding:3px;
	font:normal 10px/10px verdana;
	border:solid 1px black;
	background:#ffffcc;
	position:absolute;
	left:10000px;
	}
	
	#capa{
	width:100px;
	height:200px;
	border:solid 1px black;
	}
	</style>
	
<script>
var ayuda=[];
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorX, coorY;
if (ns6) document.addEventListener("mousemove", mouseMove, true)
if (ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}
function mouseMove(e)
{
	if (ns4||ns6){coorX = e.pageX; coorY = e.pageY;}
	if (ie4){coorX = event.x; coorY = event.y;}
	return true;
}

ayuda[0]="Ayuda de muestra"

function capita(que,esta){

tip=document.getElementById("capota");
coorY=(ie4)?event.clientY:coorY;
coorX=(ie4)?event.clientX:coorX;
x=(que==1)?coorX+10:10000;
y=(que==1)?coorY+10:10000;
	
tip.style.top=y;
tip.style.left=x;
tip.innerHTML=ayuda[esta];

}
document.write('<div id="capota" ></div>');

</script>
</head>

<body>

<div id="capa" onmousemove="capita(1,0)" onmouseout="capita(0)"></div>


</body>
</html>

el uso es capita(mostrar,nº de ayuda)
mostrar:
1=ver;
0=ocultar;

Un saludo

chusete · #3 (**permalink**) 13/01/2005, 04:24

el codigo es buenisimo, la unica pega que pondria es que genera un scroll horizontal, que no se como conseguir eliminarlo

KarlanKas · #4 (**permalink**) 13/01/2005, 05:03

jejeje! Claro, es verdad! El motivo es que en vez de ocultarlo lo muevo... ponlo así:
function capita(que,esta){

tip=document.getElementById("capota");
coorY=(ie4)?event.clientY:coorY;
coorX=(ie4)?event.clientX:coorX;
x=coorX+10;
y=coorY+10;

tip.style.visibility=(que==1)?"visible":"hidden";
tip.style.top=y;
tip.style.left=x;
tip.innerHTML=ayuda[esta];

}

A ver ahora!

AAAH!

Y en el estilo de capota cambiar left:1000px; por left:0px;