Ver Mensaje Individual
  #9 (permalink)  
Antiguo 26/07/2007, 13:00
Avatar de AlZuwaga
AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 1 mes
Puntos: 535
Re: pasar valores a funciones dentro de anónimas

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