Mostar mensaje centrado-Tooltip

adrimartin · #1 (**permalink**) 12/09/2011, 04:53

Hola!

Vereis, quiero hacer algo parecido a lo que te sale en el inicio de este foro.

Quiero que cuando mis usurarios pasen el raton por encima de una imagen, aparezca debajo de esta un div con una información.
He probado uno de los scripts que hay en el FAQ:
http://www.forosdelweb.com/wiki/Javascript:Title_mejorado_(tooltip)
pero no consigo hacer exactamente lo que quiero. Quiero que el recuadro donde pone el nombre de usuario, aparezca debajo de la imagen y justo en el medio de cada imagen.

Este es el código:

Código HTML:

<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) ? true: false; 
            var coorX, coorY; 
 
            if (ns6) document.addEventListener("mousemove", mouseMove, true) 
            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 las imagenes ... 
            </h3> 
            <span 
                onmouseover="mostrar('Adrimartin')"  
                onmouseout="ocultar()"> 
                    <img src="http://abejaterapia.com/images/W7C4P8G3.jpg" width="40px" style="padding:2px;border: 1px solid #d9d9d9;"/>
            </span> 
            <span
                onmouseover="mostrar('Nilcaste')" 
                onmousemove="mover()" 
                onmouseout="ocultar()"> 
                    <img src="http://abejaterapia.com/images/G4C6S5F4.jpg" width="40px" style="padding:2px;border: 1px solid #d9d9d9;"/>
            </span> 
        </div> 
        <div 
            id="ayuda" 
            style=" visibility:hidden; 
            position:absolute; 
            background: url(../images/info_bg.png);
            font-weight: inherit;
			font-family: Arial,Helvetica,sans-serif;
			font-style: inherit;
			font-size: 12px;
            color:#ffffff; 
            border:solid 1px #202020; 
            text-align:justify; 
            padding:2px 5px 2px 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;"> 
        </div> 
 
    </body> 
</html>

Muchas gracias! Espero vuestra ayuda :)