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