Explicacion emergente

alejoluc · #1 (**permalink**) 10/07/2005, 21:05

Hola, como podria hacer para que, al pasar el mouse por un enlace, se abra una caja, o una tabla al lado del mouse mostrando el texto que yo quiera, que podria ser, por ejemplo, la explicacion del enlace.

Saludos.

Appletalk · #2 (**permalink**) 10/07/2005, 22:35

Hola.

Para eso podrias usar simplemente el atributo title="" de HTML.
Si queres algo con un diseño diferente, podrias hacer algo asi:

Definis el enlance de la siguiente forma:

Código HTML:

 <a href="#" title="Esto es lo que se va a mostrar en una caja">Link</a>

Tendrias tambien que definir el div que se va a mostrar cuando pases el mouse

Código HTML:

<div id='mouse_div'></div>

Y su css

Código HTML:

#mouse_div 
{
  position: absolute;
  border: 2px outset green;
  background: red;
}

Luego incluis en el <head> de tu archivo un archivo .js como el siguiente:

<script type="text/javascript" src="links.js"></script>

Con el siguiente contenido

Código HTML:

function init() {
 // aca recorres todos los tags <a> y les atachas el 
 // event listener

 a_elem = document.getElementsByTagName('a');
 for( i = 0; ( a = a_elem.item(i) ); i++ ) 
 {
   // aca te pongo ejemplo solo para IE6, con el metodo attachevent.
   // si queres hacerlo mas compatible tendrias que chequear que 
   // a.attachEvent existe, si no usar a.addEventListener y sino a.onmouseover
   
  a.attachEvent('onmouseover', display_div );
  a.attachEvent( 'onmouseout', hide_div );
 }
}

// Definis las funciones display_div y hide_div

function display_div( e )
{
  // traemos la posicion del mouse del eje X
  ex = (e ) ? e.clientX : window.event.clientX;

  // traemos la posicion del eje Y
  ey = ( e ) ? e.clientY : window.event.clientY;
  
  // traemos el <a> donde se lanzo el evento
  e = ( e.srcElement ) ? a.srcElement : ( (e.target) ? e.target : window.event.srcElement) ;
   
  document.getElementById('mouse_div').style.display = 'block';

  // ojo aca. pongo un offset de 100, pero puede variar. tendrias que hacer pruebas
  document.getElementById('mouse_div').style.left = ex + 100;
  document.getElementById('mouse_div').style.top = ey;

  // lo llenamos con el title="" del <a> 
  document.getElementById('mouse_div').innerHTML = e.title;
}

function hide_div( e ) {
  // traemos el <a> donde se lanzo el evento
  e = ( e.srcElement ) ? a.srcElement : ( (e.target) ? e.target : window.event.srcElement) ;
  
  e.style.display = 'none';
}

Esto lo tipee directamente aca, puede que tenga errores, probalo...