Ver Mensaje Individual
  #3 (permalink)  
Antiguo 25/07/2006, 02:41
Avatar de el_javi
el_javi
 
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 20 años
Puntos: 10
tooltip.js (parte 1)

c) El fichero JS -> tooltip.js (parte 1)

Código PHP:
/*
    Objeto Tooltip.
    Desarrollado por Tecknosfera DBNET.
    Desarrollador: Francisco Javier Martínez.
    [email protected]
    
    Funcionamiento:
    En el evento onMouseOver del objeto que se quiera se hace la llamada al tooltip de la siguiente manera:
        onmousemove="mostrar_tooltip(event,998,'!Este es el mensaje al poner el raton encima')"
        
        - 998 -> Código de Mensaje de evento (están definidos en el array abajo montado)
        - '!Este es el mensaje al poner el raton encima' -> Mensaje de prueba.
            Va precedido de ! porque ese caracter obliga a no hacer uso de artículo.
*/

// Variable de la clase que usa el tooltip
var tooltipClass "a11_EFEFEF";

// Variable que define si el Tooltip está activado o NO
var tooltip_ACTIVO true;
// Variable que define si queremos opacidad en el Tooltip o no
var tooltip_OPACIDAD true;

var 
direccion_X_tooltip "derecha";
var 
direccion_Y_tooltip "abajo";

/* **************************************************************************************************************************************************************** */

// Array de Mensajes de los tooltips.
var mensajes_tooltip = new Array()
// El primer elemento del vector señala que NO HAY MENSAJE PARA ESE TIPO DE ID
mensajes_tooltip[0] = "NO HAS DEFINIDO UN MENSAJE PARA ESTE ELEMENTO";

// mensaje libre
mensajes_tooltip[998] = "%1";
mensajes_tooltip[999] = "Haga click aquí para %1";

// ejemplo 
mensajes_tooltip[1] = "Haga click aqui para sacar a pasear %1";


/* **************************************************************************************************************************************************************** */

// Variables Globales que controlan la posición del Raton
var X;
var 
Y;

var 
t1,t2// Pra los setTimeOut

// Variable para controlar el tiempo que tarda en cargar el Tooltip
var tiempo_espera 600;

/*
    Constructor, que agrega al final del documento el elemento DIV correspondiente al TOOLTIP
*/
    
    
document.write("<div id='tooltip' style='position:absolute;top:345px;left:32px;visibility:hidden; z-index:100'><table cellpadding='0' cellspacing='0' border='0'><tr><td width='1' height='1' class='sp'>&nbsp;</td><td colspan='3' class='sp' bgcolor='#7598DE'>&nbsp;</td><td width='1' height='1' class='sp'>&nbsp;</td></tr><tr><td width='1' class='sp' bgcolor='#7598DE'>&nbsp;</td><td colspan='3' height='3' class='sp' bgcolor='#7598DE'>&nbsp;</td><td width='1' class='sp' bgcolor='#7598DE'>&nbsp;</td></tr><tr><td width='1' class='sp' bgcolor='#7598DE'>&nbsp;</td><td width='7' class='sp' bgcolor='#7598DE'>&nbsp;</td><td height='16' class='" tooltipClass "' align='center' valign='top' id='td_mensaje_tooltip' bgcolor='#7598DE'></td><td width='7' class='sp' bgcolor='#7598DE'>&nbsp;</td><td width='1' class='sp' bgcolor='#7598DE'>&nbsp;</td></tr><tr><td width='1' class='sp' bgcolor='#7598DE'>&nbsp;</td><td colspan='3' height='2' class='sp' bgcolor='#7598DE'>&nbsp;</td><td width='1' class='sp' bgcolor='#7598DE'>&nbsp;</td></tr><tr><td width='1' height='1' class='sp'>&nbsp;</td><td colspan='3' height='1' class='sp' bgcolor='#7598DE'>&nbsp;</td><td width='1' height='1' class='sp'>&nbsp;</td></tr></table></div>");

    
// Iframe que va continuamente debajo del Tooltip, para que se pueda mostrar por encima de los Select y TextAreas
    
document.write("<iframe id='iframe_oculto' src='' scrolling='no' frameborder='0' style='position:absolute; top:0px; left:0px; display:none;'></iframe>");


// Función encargada hacer que aparezca o desaparezca el tooltip respecto a la posición del Raton
function mostrar_tooltip(evt){
    
// Capturamos el Evento
    
var = (window.event) ? window.event evt;

    
// Definimos que Objeto produjo el Evento
    
var elem = (e.target) ? e.target : ((e.srcElement) ? e.srcElement null);
    
    
// Agregamos en tiempo de Ejecución un Evento
    
elem agregar_evento_dinamico(elem,"mouseout","desactivar_tooltip")

    
// Comprobamos si está activa la funcionalidad de Tooltip
    
if(tooltip_ACTIVO == true){
        if (
t1){
            
clearTimeout(t1);
        }
        if (
t2){
            
clearTimeout(t2);
        }
        
        
capa document.getElementById("tooltip");
        
obj_iframe_oculto document.getElementById('iframe_oculto');
        
        
altura_desde_puntero 23;
        
diferencia_x 5;

        
e.clientX document.documentElement.scrollLeft document.body.scrollLeft;
        
e.clientY document.documentElement.scrollTop document.body.scrollTop;

        
altura_desde_puntero// Se divide por el índice 1.01 porque en Netscape hay diferencia de unidades en la ALTURA del raton

        
diferencia_x;
        

        
document.getElementById("tooltip").style.width null;

        
// Ponemos en la capa de Información el mensaje correspondiente
        
document.getElementById("td_mensaje_tooltip").innerHTML mensaje_segun_elemento(arguments);

        
//comprovamos, que la capa no se salga de los límites del documento. Si es asi.. le hacemos salir por el lado opuesto (arriba o izquierda)
        
var ancho_tooltip document.getElementById("tooltip").clientWidth;
        var 
alto_tooltip document.getElementById("tooltip").clientHeight;
        var 
posicion_ratonX X;
        var 
posicion_ratonY Y;
        var 
ancho_pantalla =  document.body.clientWidth;
        var 
alto_pantalla document.body.clientHeight document.documentElement.scrollTop document.body.scrollTop;
        
        var 
ancho_tooltip document.getElementById("tooltip").clientWidth;
        
document.getElementById("tooltip").style.width ancho_tooltip;

        
// Posicionamos la capa de la información en las coordenadas calculadas
        
capa.style.left X;
        
capa.style.top Y;
        
        if(
tooltip_OPACIDAD == true){
            
capa.style.filter='alpha(opacity=85)'// Opacidad para IE
            
capa.style.opacity='0.85'// Ocapacidad para Netscape
        
}
        
        
// si el Tooltip se va a salir por la derecha de la pantalla ... hacemos que salga a la izquierda del raton
        
if(direccion_X_tooltip == "derecha" && ((posicion_ratonX ancho_tooltip) >= ancho_pantalla)){
            
capa.style.left = (posicion_ratonX ancho_tooltip);
        }
        
        
// si el Tooltip se va a salir por la izquierda de la pantalla... hacemos que salga a la derecha del raton
        
if(direccion_X_tooltip == "izquierda" && ((posicion_ratonX ancho_tooltip) <= 0)){
            
capa.style.left posicion_ratonX ancho_tooltip;
        }
        
        
// si el Tooltip se va a salir por arriba de la pantalla ... hacemos que salga abajo del raton
        
if(direccion_Y_tooltip == "arriba" && ((posicion_ratonY alto_tooltip) <= 0)){
            
capa.style.top posicion_ratonY alto_tooltip altura_desde_puntero;
        }

        
// si el Tooltip se va a salir por abajo de la pantalla ... hacemos que salga arriba del raton
        
if(direccion_Y_tooltip == "abajo" && ((posicion_ratonY alto_tooltip) >= alto_pantalla))
        {
            
capa.style.top posicion_ratonY alto_tooltip altura_desde_puntero 5;
        }
    
        
// Posicionamos debajo del Tooltip el IFRAME que nos ayudará a que el tooltip sea visible sobre SELECT y TEXTAREA
        
capa.style.display "block";
        
obj_iframe_oculto.style.width parseInt(capa.offsetWidth);
        
obj_iframe_oculto.style.height parseInt(capa.offsetHeight);
        
obj_iframe_oculto.style.top parseInt(capa.style.top);
        
obj_iframe_oculto.style.left parseInt(capa.style.left);
        
obj_iframe_oculto.style.zIndex capa.style.zIndex 1;
        
obj_iframe_oculto.style.opacity='0.0';
        
obj_iframe_oculto.style.filter='alpha(opacity=0)'// Opacidad para IE

//        obj_iframe_oculto.style.display = "block";
//        obj_iframe_oculto.style.visibility = "visible";
    
        // Hacemos que sea visible la capa
        
t1 setTimeout("capa.style.visibility='visible';",tiempo_espera);
        
t2 setTimeout("obj_iframe_oculto.style.display = 'block';",tiempo_espera);
    }

Como os dije antes, no me dejaba postear todo junto asi que lo he dividido. (ESTA ES LA PARTE 1)