texto sobre enlaces al hacer hover

frasko01 · #1 (**permalink**) 06/10/2008, 10:09

Hola amigos.

Llevo tiempo intentado hacer que al pasar el ratón por encima de un enlace aparezca una descripción sobre éste, ojalá puedan ayudarme.

He visto por ahi algunas formas de hacerlo pero al probarlas veo que se debe indicar antes la posición del div que contiene la descripción(top: 100px, left 200px) etc.

Lo que yo quisiera es que aparezca justo encima del puntero del mouse. ¿Se podrá hacer eso? Supongo que habria que buscar la posición del puntero en pantalla o algo asi, necesito vuestra ayuda.

Gracias por adelantado.

the_web_saint · #2 (**permalink**) 06/10/2008, 10:25

Hola aqui he dejado un ejemplo.

http://www.forosdelweb.com/f13/lista...r-over-625419/

frasko01 · #3 (**permalink**) 06/10/2008, 10:44

Gracias. Una pregunta...

El tooltip debe ir como un comentario y fuera del div?

De todos modos no consigo que funcione

Saludos

the_web_saint · #4 (**permalink**) 06/10/2008, 10:50

Si notas en el js en la linea:
document.getElementById("posicion").innerHTML = "Arrastre para ordenar sus "+msg;
veras que eso es lo que imprime en el div, como veras se usa una variable, esta debe estar definida antes de llamar a la función, es todo.

Saludos

frasko01 · #5 (**permalink**) 06/10/2008, 11:02

No se porqué pero no funciona. Te pongo el código por si encuentras algun fallo.

Gracias de todas formas.

Código HTML:

<head>
<script language="javascript" type="text/javascript">

<!--
msg="<i>GUÍA de los Archivos de las Diputaciones Provinciales y Forales y de los Concejos y Cabildos Insulares de España.</i> Grupo de Trabajo de Archiveros de Diputaciones, Concejos y Cabildos Insulares. Cádiz: Diputación Provincial, 2006";

if (browser.isNS) {
document.addEventListener("click", getposicion, true);
event.preventDefault();
}
}
function getposicion(event){
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
if (browser.isOpera) {
x = window.event.clientX + document.documentElement.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop;
} 
document.getElementById("posicion").style.visibility = "visible";
document.getElementById("posicion").style.left= (x - 55) +"px";
document.getElementById("posicion").style.top = y + 20 +"px";
document.getElementById("posicion").innerHTML = msg;
}

function cancelar() {
if (browser.isIE || browser.isOpera) {
document.detachEvent("onmousemove", getposicion);
document.detachEvent("onclick", getposicion);
}
if (browser.isNS ) {
document.removeEventListener("mousemove", getposicion, true);
document.removeEventListener("click", getposicion, true);
}
document.getElementById("posicion").style.visibility= "hidden";
}
//para cambiar el color de fondod de la tabla
function mOvr(obj, color)
{
    obj.style.background=color;
}  
//-->

</script>
</head>

<body>
<div id="posicion" class="hint"></div>

<a href="#" onMouseOver="mOvr(this,'#EBEDEF'); initMovimiento(event);" onMouseOut="mOvr(this,'#FFFFFF'); cancelar();">Guía de Archivos de Diputaciones</a>

the_web_saint · #6 (**permalink**) 06/10/2008, 11:07

Intenta colocandolo así:

Código PHP:

  <div onMouseOver="mOvr(this,'#EBEDEF'); initMovimiento(event);" onMouseOut="mOvr(this,'#FFFFFF'); cancelar();">
<a href="#">Gu&#237;a de Archivos de Diputaciones</a>
</div>

Salu2

frasko01 · #7 (**permalink**) 07/10/2008, 01:33

Siento haber tardado tanto en responder pero he estado muy liado.

Gracias de nuevo, pero no funciona...

frasko01 · #8 (**permalink**) 07/10/2008, 03:46

He logrado hacerlo!!
He encontrado un script, que ademas es facil de personalizar, y funciona estupendamente...

No se si puedo poner el link a la página de los scripts...

Muchas gracias, saludos.