Foros del Web - Ver Mensaje Individual - pasar valores a funciones dentro de anónimas

AlZuwaga · #9 (**permalink**) 26/07/2007, 13:00

Hola nuevamente.
Acá dejo la implementación de la función en cuestión. La modifiqué un poco desde ayer porque me pareció mejor de esta manera. Igualmente debe ser 100% mejorable. Estoy aprendiendo y me gustaría algún que otro posible feddback. Se trata de un generador de tooltips.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>azTT ToolTip</title>
<script type="text/javascript">

function getElementsByClassName(strClass, strTag, objContElm) {
//Obtenida de: http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
  strTag = strTag || "*";
  objContElm = objContElm || document;    
  var objColl = objContElm.getElementsByTagName(strTag);
  if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;
  var arr = new Array();                              
  var delim = strClass.indexOf('|') != -1  ? '|' : ' ';   
  var arrClass = strClass.split(delim);    
  for (var i = 0, j = objColl.length; i < j; i++) {                         
    var arrObjClass = objColl[i].className.split(' ');   
    if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
    var c = 0;
    comparisonLoop:
    for (var k = 0, l = arrObjClass.length; k < l; k++) {
      for (var m = 0, n = arrClass.length; m < n; m++) {
        if (arrClass[m] == arrObjClass[k]) c++;
        if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
          arr.push(objColl[i]); 
          break comparisonLoop;
        }
      }
    }
  }
  return arr; 
}


function prepara_tooltips(){
	var coleccion = getElementsByClassName('azTT');
		for (var i = 0; i < coleccion.length; i++) {
			if(coleccion[i].title != ''){
				titulo = coleccion[i].title;
				coleccion[i].title = '';
				nuevo_span = document.createElement('span');
				nuevo_span_texto = document.createTextNode(titulo);
//				nuevo_span_texto = document.createTextNode(coleccion[i].textContent);
				nuevo_span.appendChild(nuevo_span_texto);
				nuevo_span.setAttribute('id', 'azTT' + i)
				nuevo_span.style.display = 'none';
				nuevo_span.style.position = 'absolute';
				nuevo_span.style.border = '1px solid #000000';
				nuevo_span.style.background = '#FFCC00';
				nuevo_span.style.top = coleccion[i].offsetTop + 20 + 'px';
				nuevo_span.style.left = coleccion[i].offsetLeft + 5 + 'px';
				nuevo_span.style.padding = '2px';
				coleccion[i].parentNode.insertBefore(nuevo_span, coleccion[i]);
				// GRACIAS a Panino5001 (http://www.forosdelweb.com/member.php?u=65984)
				coleccion[i].paninoIndex = 'azTT' + i;
				coleccion[i].onmouseover = function(){tooltipsOn(this.paninoIndex)};
				coleccion[i].onmouseout = function(){tooltipsOff(this.paninoIndex)};
			}
		}
}

function tooltipsOn(azTT){
	document.getElementById(azTT).style.display = 'block';
}

function tooltipsOff(azTT){
	document.getElementById(azTT).style.display = 'none';
}

window.onload = prepara_tooltips;
</script>
</head>

<body>
<h1>azTT ToolTips</h1>
<p>Se trata de un generador de tooltips que utiliza <dfn title="Javascript" class="azTT">JS</dfn> para rescatar el atibuto title de todos los elementos que tengan una clase <dfn title="Cascade Style Sheet" class="azTT">CSS</dfn> llamada azTT. Sale a ra&iacute;z del  mensaje <a href="http://www.forosdelweb.com/showthread.php?t=507336" target="_blank">Descripci&oacute;n emergente en imageboton</a> publicado en <strong class="azTT" title="Foros del Web">FDW</strong> y no es m&aacute;s que un ejercicio que me servir&aacute; para aprender un poco.</p>
<p>Aplicado sobre una imagen:<br /><img src="http://www.forosdelweb.com/fdwtheme/mdw-powered.gif" alt="Maestros del Web" title="Maestros del Web" class="azTT" /></p>
<fieldset>
<legend>Aplicado sobre los input's</legend>
<form id="form1" name="form1" method="post" action="">
  <label for="usuario">Usuario</label>
  <input type="text" name="usuario" id="usuario" class="azTT" title="Introduzca su nombre de usuario" /><br />
  <label for="password">Password</label>
  <input type="text" name="password" id="password" class="azTT" title="Introduzca su contraseña" /><br />
  <input type="submit" name="enviar" value="Enviar" id="enviar" class="azTT" title="Presione aquí para ingresar" />
  <br />
</form>
</fieldset>
</body>
</html>

Saludos