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.