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'> </td><td colspan='3' class='sp' bgcolor='#7598DE'> </td><td width='1' height='1' class='sp'> </td></tr><tr><td width='1' class='sp' bgcolor='#7598DE'> </td><td colspan='3' height='3' class='sp' bgcolor='#7598DE'> </td><td width='1' class='sp' bgcolor='#7598DE'> </td></tr><tr><td width='1' class='sp' bgcolor='#7598DE'> </td><td width='7' class='sp' bgcolor='#7598DE'> </td><td height='16' class='" + tooltipClass + "' align='center' valign='top' id='td_mensaje_tooltip' bgcolor='#7598DE'></td><td width='7' class='sp' bgcolor='#7598DE'> </td><td width='1' class='sp' bgcolor='#7598DE'> </td></tr><tr><td width='1' class='sp' bgcolor='#7598DE'> </td><td colspan='3' height='2' class='sp' bgcolor='#7598DE'> </td><td width='1' class='sp' bgcolor='#7598DE'> </td></tr><tr><td width='1' height='1' class='sp'> </td><td colspan='3' height='1' class='sp' bgcolor='#7598DE'> </td><td width='1' height='1' class='sp'> </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 e = (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;
X = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
Y = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
Y = Y + altura_desde_puntero; // Se divide por el índice 1.01 porque en Netscape hay diferencia de unidades en la ALTURA del raton
X = X + 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)