Ver Mensaje Individual
  #2 (permalink)  
Antiguo 10/07/2005, 22:35
Appletalk
 
Fecha de Ingreso: febrero-2004
Mensajes: 221
Antigüedad: 21 años
Puntos: 0
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...