Ver Mensaje Individual
  #4 (permalink)  
Antiguo 10/01/2010, 07:24
Avatar de junihh
junihh
 
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 20 años, 3 meses
Puntos: 7
Respuesta: Aplicar una funcion a un objeto creado dinamicamente

@Tecna: Dentro de la funcion tengo una variable donde luego de leer el title guardo el valor, solo entonces borro el title del objeto para que no salga al mismo tiempo del tooltip.

@Tecna y @David: Ambas funciones tienen 3 eventos: onmouseover, onmouseout y onmousemove (este ultimo para seguir la posicion del mouse). Entiendo lo de agregar un listener extra, pero el problema con hacerlo es que quita recursos al navegador y no me gustaria, quiero que mi aplicacion sea ligera pese a la cantidad de JS que uso en ella.

Para estar mas claros, aqui les dejo el codigo de todo el script:


Código HTML:
function setAllTitles ()
{
    var objs = document.getElementsByTagName('*');
    var tt;
    //
    for (var i = 0; i < objs.length; i++)
    {
	   if (objs[i].title)
	   {
		  setTT (objs[i]);
	   }
    }
    //
    function setTT (ob)
    {
	   var tit = ob.title;
	   ob.removeAttribute ('title');
	   //
	   ob.onmouseover = function (e)
	   {
		  tt = document.createElement ('div');
		  tt.style.backgroundColor = '#000';
		  tt.style.fontFamily = 'Helvetica, Arial, sans-serif';
		  tt.style.fontSize = '10px';
		  tt.style.color = '#FFF';
		  tt.style.border = 'solid 1px #FFF';
		  tt.style.padding = '6px 6px 4px 6px';
		  tt.style.position = 'absolute';
		  tt.style.display = 'none';
		  tt.style.borderRadius = '4px';
		  tt.style.MozBorderRadius = '4px';
		  tt.style.WebkitBorderRadius = '4px';
		  tt.style.KhtmlBorderRadius = '4px';
		  tt.id = 'lyrtooltip';
		  tt.innerHTML = tit;
		  document.body.appendChild (tt);
		  tt.style.zoom = 1;
		  //
		  document.onmousemove = function (evt)
		  {
			 tt.style.left = ( parseInt (mouseX(evt)) + 15 ) + 'px';
			 tt.style.top = ( parseInt (mouseY(evt)) - 5 ) + 'px';
			 tt.style.display = 'block';
		  }
	   }
	   //
	   ob.onmouseout = function ()
	   {
		  tt.style.display = 'none';
		  document.body.removeChild (tt);
	   }
    }
}

function setObjTitle (id)
{
    var ob = document.getElementById(id);
    var tit = ob.title;
    var tt;
    //
    ob.removeAttribute ('title');
    //
    ob.onmouseover = function (e)
    {
	   tt = document.createElement ('div');
	   tt.style.backgroundColor = '#000';
	   tt.style.fontFamily = 'Helvetica, Arial, sans-serif';
	   tt.style.fontSize = '10px';
	   tt.style.color = '#FFF';
	   tt.style.border = 'solid 1px #FFF';
	   tt.style.padding = '6px 6px 4px 6px';
	   tt.style.position = 'absolute';
	   tt.style.display = 'none';
	   tt.style.borderRadius = '4px';
	   tt.style.MozBorderRadius = '4px';
	   tt.style.WebkitBorderRadius = '4px';
	   tt.style.KhtmlBorderRadius = '4px';
	   tt.id = 'lyrtooltip';
	   tt.innerHTML = tit;
	   document.body.appendChild (tt);
	   tt.style.zoom = 1;
	   //
	   document.onmousemove = function (evt)
	   {
		  tt.style.left = ( parseInt (mouseX(evt)) + 15 ) + 'px';
		  tt.style.top = ( parseInt (mouseY(evt)) - 5 ) + 'px';
		  tt.style.display = 'block';
	   }
    }
    //
    ob.onmouseout = function ()
    {
	   tt.style.display = 'none';
	   document.body.removeChild (tt);
	   document.onmousemove = null;
    }
}

function mouseX (evt)
{
    if (!evt) evt = window.event;
    if (evt.pageX) return evt.pageX; else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return 0;
}

function mouseY (evt)
{
    if (!evt) evt = window.event;
    if (evt.pageY) return evt.pageY; else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else return 0;
}

De no haber otra alternativa a los listener, me pueden aclarar como aplicarlo ??
__________________
JuniHH
- Mi blog
- Mi portafolio