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