Ver Mensaje Individual
  #185 (permalink)  
Antiguo 03/06/2004, 04:55
Avatar de caricatos
caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.558
Antigüedad: 16 años
Puntos: 1264
187.- Title mejorado (tooltip)

P: Puedo mejorar la visualización de los mensajes aclaratorios (title)

R: Mediante una combinación de las FAQ39 (http://www.forosdelweb.com/showthrea...744#post264744) Averiguar coordenadas del ratón, y FAQ57 (http://www.forosdelweb.com/showthrea...126#post267126) Mostrar/Ocultar capas.

Ejemplo:

Código PHP:
<html>
    <
head>
        <
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <
script type="text/javascript">
            var 
ns4 = (document.layers)? true:false
            
var ie4 = (document.all)? true:false
            
var ns6 = (document.getElementById && !document.all) ? truefalse;
            var 
coorXcoorY;

            if (
ns6document.addEventListener("mousemove"mouseMovetrue)
            if (
ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove mouseMove;}

            function 
mouseMove(e)    {
                if (
ns4||ns6)    {
                    
coorX e.pageX;
                    
coorY e.pageY;
                }
                if (
ie4)    {
                    
coorX event.x;
                    
coorY event.y;
                }
                
coorX += document.body.scrollLeft;
                
coorY += document.body.scrollTop;
                return 
true;
            }

            function 
ini()    {
                if (
ie4)    document.body.onmousemove mouseMove;
            }

            function 
mostrar(dato)    {
                
with(document.getElementById("ayuda"))    {
                    
style.top coorY 10;
                    
style.left coorX 10;
                    
style.visibility "visible";
                    
innerHTML dato;
                }
            }

            function 
ocultar()    {
                
document.getElementById("ayuda").style.visibility "hidden";
            }

            function 
mover()    {
                
with(document.getElementById("ayuda"))    {
                    
style.top coorY 10;
                    
style.left coorX 10;
                }
            }

        
</script>
    </head>
    <body onload="ini()" >
        <div align=center>
            <h3>
                ... Mueve el raton por el texto ...
            </h3>
            <span
                onmouseover="mostrar('primer mensaje')"
                onmousemove="mover()"
                onmouseout="ocultar()">
                    Mensaje 1
            </span>
            <span
                onmouseover="mostrar('mensaje segundo')"
                onmousemove="mover()"
                onmouseout="ocultar()">
                    Mensaje 2
            </span>
        </div>
        <div
            id="ayuda"
            style=" visibility:hidden;
            position:absolute;
            background:yellow;
            font:normal 10px/10px verdana;
            color:black;
            border:solid 1px black;
            text-align:justify;
            padding:10px 10px 10px 10px;">
        </div>

    </body>
</html> 
Se pueden cambiar los estilos de la capa ayuda para personalizar la visualización.

__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por caricatos; 06/08/2004 a las 02:37 Razón: faltaba considerar scroll