Mostrar informacion onMouseOver

indio- · #1 (**permalink**) 25/07/2006, 01:49

Hola!

Estoy intentando mostrar tabla al lado del cursor del raton cuando paso el raton sobre un enlace, algo asi como la propiedad title de la etiqueta <a>,pero no lo consigo.

Alguien me puede ayudaR?

Gracias

el_javi · #2 (**permalink**) 25/07/2006, 02:36

Buenos días a todos y en especial a ti indio-, que va dirigido este post.

Te voy a dejar aqui puesto el códiugo de mi propia librería de Tooltip's a fin de que le des un buen uso.

Esta bastante abanzada, pero no descarto modificaciones y mejoras.

se compone de 3 ficheros:
a) Fichero de CSS

Código PHP:

  /* Estilos de separadores */ 
.sp {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1px;text-decoration:none;color: #EFEFEF;line-height:1px} 
 
.a11_EFEFEF {font-family: Arial, Verdana, Helvetica, sans-serif;font-size: 11px;text-decoration:none;color: #EFEFEF;}

b) Fichero HTML, donde puedes ver sus usos

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
<head> 
    <title>Tooltip</title> 
    <link rel="STYLESHEET" type="text/css" href="css/estilos.css"> 
    <script src="tooltip.js" type="text/javascript"></script> 
</head> 
 
<body> 
<center> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<a href="#" onmousemove="mostrar_tooltip(event,998,'!Este es el mensaje al poner el raton encima')">Ponme el raton encima :)</a><br><br><br> 
<a href="#" onmousemove="mostrar_tooltip(event,999,'!salir')">Otro tipo de mensaje</a><br><br><br> 
<a href="#" onmousemove="mostrar_tooltip(event)">Si no defines mensaje ni codigo de evento</a><br><br><br> 
<a href="#" onmousemove="mostrar_tooltip(event,1,'perro')">Otro tipo de mensaje (para que saque el artículo del parámetro MASCULINO)</a><br><br><br> 
<a href="#" onmousemove="mostrar_tooltip(event,1,'gata')">Otro tipo de mensaje (para que saque el artículo del parámetro FEMENINO)</a><br><br><br> 
</center> 
 
</body> 
</html>

c) Y por último la libreria JS donde está el código del Tooltip

LO POSTEO LUEGO, porqu eme quedaba sin espacio en el post para seguir escribiendo

Creo que está bastante bien, y se salta bastantes problemas que en este foro habíamos visto y hablado respecto a otros que ya se hicieron.

Uno de los problemas principales, es que si pones un tooltip de los cotidianos, sobre ciertos elementos de formulario (select y select múltiple) los otros tooltips se quedaban por detras de dichos elementos. Este tiene un "abanzado" jejeje desarrollo para evitar lo comentado.

Toda persona que coja este tooltip, lo destripe y le saque defectos y mejoras, porfavor, háganmelo saber, para incluir dichas mejoras en mi librería.

Espero que esto te sea útil.

Un saludo a tod@s.

el_javi · #3 (**permalink**) 25/07/2006, 02:41

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 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)

el_javi · #4 (**permalink**) 25/07/2006, 02:42

ya terminamos.. esta es la PARTE 2

Código PHP:

   
// Función para desactivar el Tooltip 
function desactivar_tooltip(){ 
    // Comprovamos si la funcionalidad TOOLTIP está activa 
    if(tooltip_ACTIVO == true){ 
        // Hacemos desaparecer el Tooltip 
//        t2 = setTimeout("capa.style.visibility='hidden'",tiempo_espera); 
        capa.style.visibility = "hidden"; 
        // Hacemos desaparecer el IFRAME que hay debajo del Tooltip, el cual nos ayuda a que el Tooltip se vea sobre elementos SELECT y Textarea 
        obj_iframe_oculto.style.display = "none"; 
        if (t1){ 
            clearTimeout(t1); 
        } 
        if (t2){ 
            clearTimeout(t2); 
        } 
    } 
} 
 
 
  
 /* 
     Función que recorre un conjunto de Argumentos (pasados desde la función de Apertura del tooltip). 
    Ésta función monta le mensaje de salida del tooltip 
 */ 
 function mensaje_segun_elemento(argumentos_referenciados){ 
     var el_mensaje_tooltip = ""; 
     var mensaje_totalmente_definido = false; 
    var posicion_mensaje = -1; 
    // Si le hemos pasado algún parámetro 
//    alert(argumentos_referenciados.length) 
     if(argumentos_referenciados.length > 0){ 
        // Recorro los parámetros para buscar el Código de Mensaje y si hay o no mensaje dinámico 
         for(i=1;i<argumentos_referenciados.length;i++){ 
            // Si el argumento actual es una cadena de texto 
            if(isNaN(argumentos_referenciados[i]) || i >1){ 
                // Comprovamos que se haya puesto ya el mensaje correspondiente, para incluirle los parámetros dinámicos 
                if(el_mensaje_tooltip != ""){ 
                    var parametro_mostrar = argumentos_referenciados[i]; 
                    // Si el argumento actual REALEMNTE ES SUNA CADENA 
 
                    if(isNaN(argumentos_referenciados[i])){ 
                        // Si NO encontramos el elemento de Negación (!) como primer caracter del parámetro, es que PONEMOS el DETERMINANTE 
                        if(argumentos_referenciados[i].substr(0,1) != "!"){ 
                            // comprobamos si es masculino o femenino 
                            if ((argumentos_referenciados[i].substr(argumentos_referenciados[i].length-1, 1) != "a" && argumentos_referenciados[i].substr(0, 1) != "a") || argumentos_referenciados[i].substr(0, 1) == "h"){ 
                                determinante = "el"; 
                            } 
                            else{ 
                                determinante = "la";  
                            } 
                        } 
                        else{ 
                            parametro_mostrar = parametro_mostrar.substr(1); 
                            determinante = ""; 
                        } 
                    } 
                    else{ 
                        determinante = ""; 
                    } 
                    el_mensaje_tooltip = el_mensaje_tooltip.replace("%" + (i-1),determinante + " " + parametro_mostrar); 
                } 
                else{ 
                    mensaje_totalmente_definido = false; 
                }                 
            } 
            else {// Si el elemento encontrado es un NÚMERO (será el código de mensaje) 
                mensaje_totalmente_definido = true 
                // Nos quedamos con la posición que ocupa el mensaje que hay que mostrar 
                posicion_mensaje = argumentos_referenciados[i]; 
                el_mensaje_tooltip = mensajes_tooltip[posicion_mensaje]; 
            } 
        } // for 
        // Si no se le ha pasado el argumento de Reemplazo, mostramos el Mensaje genérico de esa "Categoria" 
        if(el_mensaje_tooltip.indexOf("%") != -1){ 
            // Subimos 1 nivel el código de mensaje, para mostar el mensaje genérico de esa "categoria" 
            var cadena_codigo_mensaje = posicion_mensaje.toString().substring(0,2) + "0"; 
            el_mensaje_tooltip = mensajes_tooltip[parseInt(cadena_codigo_mensaje)]; 
        } 
    } 
    else{// Si no hay parámetros no hay mensaje 
        mensaje_totalmente_definido = false 
    } 
 
    if(mensaje_totalmente_definido == false){ 
        el_mensaje_tooltip = mensajes_tooltip[0]; 
    } 
     
    return(el_mensaje_tooltip); 
 } 
 
  
 /* 
    Función que asigna dinamicamente un evento 
    Parametro 1: El objeto al que se le asignará el evento 
    Parametro 2: Evento que asignamos (Como SOLO IE tiene ON en sus eventos, la cadena no ha de llevar el ON. Si lo tiene, la función se lo quitará). 
    Parámetro 3: Función que asignamos al objeto en ese evento 
*/ 
function agregar_evento_dinamico (el_objeto, el_evento, la_funcion){ 
    if(el_evento.substr(0,2).toLowerCase() == "on"){ 
        el_evento = el_evento.substr(2,el_evento.length) 
    } 
    // Agregamos en tiempo de Ejecución el evento MouseOut del Boton 
    if (window.addEventListener) {// Si El navegador tiene un EventListener (Firefox y Netscape) 
        el_objeto.addEventListener(el_evento,eval(la_funcion),true); 
    } 
    else {// Si no es Netscape ni Firefox 
        // Si el navegador es IE 5+ 
        if (window.attachEvent){ 
            var cadena_evento = "on" + el_evento; 
            el_objeto.attachEvent(cadena_evento,eval(la_funcion)); 
        } 
        else {// Si no es IE 5+ 
            if (document.getElementById){ 
                el_objeto.onmouseout = eval(la_funcion); 
            } 
        } 
    } 
    return(el_objeto); 
}

Quiro hacer una pregunta de interes general... ahy alguna manera de ahcer lo que yo he hecho, sin poner 3 post's? es para no llenar esto de cosas mias.. para la próxima.

Saludos a toso, y espero que mis comentarios sea útiles

indio- · #5 (**permalink**) 25/07/2006, 03:02

ok, muchas gracias, voy a ponerme con ello.