Problemas con parámetros y eventos

MonoBorracho · #1 (**permalink**) 17/11/2005, 09:04

Hola a todos/as. Tengo un problema con un script para hacer aparecer una capa en la posición del ratón y que cambie un texto en la capa colocando el title del enlace apuntado.

El html tiene una capa llamada "tooltip" que es la que se muestra con el texto dinámico:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Documento sin t&iacute;tulo</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="miTooltipYExtras.js"></script>
</head>
<body>
	<div id="contenido">
		<ul>
		<li><a href="1" title="title 1">enlace 1</a></li>
		<li><a href="2" title="title 2">enlace 2</a></li>
		<li><a href="3" title="title 3">enlace 3</a></li>
		<li><a href="4" title="title 4">enlace 4</a></li>
		</ul>
	</div>
	<div id="tooltip">
		<p></p>
	</div>
</body>
</html>

El código javascript que tengo hasta ahora es este:

Código:

EXTRAS = {
	// ======================================================
	// Capturador de eventos (www.scottandrew.com)
	sumaEvento : function (objetivo, tipoDeEvento, queEjecutar, usoDeLaCaptura){
		if(objetivo.addEventListener){
			objetivo.addEventListener(tipoDeEvento, queEjecutar, usoDeLaCaptura);
			return true;
		}else{ 
			if (objetivo.attachEvent){
				var r = objetivo.attachEvent("on"+tipoDeEvento, queEjecutar);
				return r;
			}else{
				return false;
			}
		}
	},//final de la función sumaEvento
	// ======================================================
}//final del encapsulado EXTRAS
// ==========================================================

//Variables globales para que funcione en Firefox y similares
var X = 0;
var Y = 0;
//Variables globales para que funcione en Firefox y similares

TOOLTIP = {
	//=========================================================
	capaTooltip : 'tooltip',
	offsetX : 0,
	offsetY : 30,
	//=========================================================
	start : function() {
		
		var referenciasEnlaces = document.getElementsByTagName('a');
		
		for (var i=0; i<referenciasEnlaces.length; i++) {
			
			var enlaceActual = referenciasEnlaces[i];
			//alert('antes de onmouseover enlaceActual= '+enlaceActual);
			enlaceActual.onmouseover = function() {
				//alert('antes de ponTip enlaceActual= '+enlaceActual);
				TOOLTIP.ponTip(enlaceActual);
			}
			enlaceActual.onmouseout = function() {
				TOOLTIP.quitaTip();
			}
			
		}
		
	},//final de start
	//=========================================================
	
	ponTip : function (objetoActual) {
			
		var referenciaAlTooltip = document.getElementById(TOOLTIP.capaTooltip);
		
		var xTemp = TOOLTIP.offsetX+X;
		var yTemp = TOOLTIP.offsetY+Y;
		
		var leftTooltip = xTemp+'px';
		var topTooltip = yTemp+'px';
				
		//Si quiero retardo descomento esto
		/*var millis = 500;
		var date = new Date();
		var curDate = null;
		do {
			var curDate = new Date();
		}while(curDate-date < millis);*/
		//Si quiero retardo descomento esto
		
		//alert('Dentro de ponTip objetoActual= '+objetoActual);
		
		referenciaAlTooltip.firstChild.nodeValue = objetoActual.title;
		
		referenciaAlTooltip.style.left = leftTooltip;
		referenciaAlTooltip.style.top = topTooltip;
		referenciaAlTooltip.style.visibility = 'visible';
		
	},//final de ponTip
	//=========================================================
	
	quitaTip : function () {
		
		var referenciaAlTooltip = document.getElementById(TOOLTIP.capaTooltip);
				
		referenciaAlTooltip.style.visibility = 'hidden';
		referenciaAlTooltip.style.left = '-1000px';
		

	},//final de quitaTip
	//=========================================================
	
	buscaCoord : function (e) {
		
		var ie = document.all?true:false;
		
		if (ie) {
			
			//para IE funciona lo de abajo
			X = event.clientX + document.body.scrollLeft;
			Y = event.clientY + document.body.scrollTop;
		
		} else {
			
			X = e.pageX;
			Y = e.pageY;
		
		}
	}//final de buscaCoord
}//final del encapsulado TOOLTIP
// ==============================================================================================
if (document.getElementsByTagName) EXTRAS.sumaEvento(document, 'mousemove', TOOLTIP.buscaCoord, false);
if (document.getElementsByTagName) EXTRAS.sumaEvento(window, 'load', TOOLTIP.start, false);
// ==============================================================================================

El problema en concreto es que dentro del for de la función "start" referenciasEnlaces[i] contiene la referencia al enlace actual y luego asigno un evento onmouseover a ese enlace pero el parametro que uso en la siguiente línea (enlaceActual) es el que queda cuando se acaba el for completamente. Yo quisiera poder pasar a la función ponTip el parámetro enlaceActual del momento en que se asigna el evento onmouseover.
Así como está se queda siempre en el valor del último enlace (al finalizar el for completamente).
Mi intención es que dentro de ponTip cambie el title del enlace actual a title="" para que no me salga en el navegador y poner ese title del enlace en el párrafo que hay en la capa "tooltip" con referenciaAlTooltip.firstChild.nodeValue = objetoActual.title

Ya se que es enrollarse demasiado pero así teneis todo expuesto. Si alguien tiene una idea de como solucionarlo...