Cuando uno posiciona el ratón sobre un link, lo que se ve en la barra de estado del navegador es el path del documento al que apunta. A mi nunca me ha gustado este comportamiento predeterminado, aportando mi propia solución: mostrar el texto del link o el del atributo title del mismo.

Actualización
01-abr-06 : El código ha sido actualizado a una versión aún más sencilla y encapsulado en un objeto para no “ensuciar” el espacio de nombres global (global namespace).

El script es pequeño, no interfiere con otros que pueda haber que se enganchen a los eventos onload / onmouseover / onmouseout y como valor añadido su funcionamiento es muy simple: solo se ha de incluir el código en la página y cambiar el texto por defecto que queremos que aparezca en la barra de estado.

A la hora de escribir código que sea reutilizable en otros proyectos, se ha de buscar que no interfiera con el resto del código. Una manera sencilla de lograrlo es simplemente encapsulardo en una clase. En el caso que nos ocupa sera además un objeto singleton, esto es: que solo se instancia una vez, más concretamente en su definición, ya que es algo global al comportamiento de la página.

El código

  1. var DHlinkStatus = {
  2.  
  3.   defaultStatus : 'Texto por defecto',
  4.  
  5.   mouseOut : function() {
  6.     window.defaultStatus = DHlinkStatus.defaultStatus;
  7.     return true;
  8.   },
  9.  
  10.   mouseOver : function(e) {
  11.     var t = window.event? event.srcElement : this;
  12.     var s = t.title || t.innerText || t.textContent;
  13.     defaultStatus = s || DHlinkStatus.defaultStatus;;
  14.     if (e.preventDefault) e.preventDefault();
  15.     return true;
  16.   },
  17.  
  18.   create : function() {
  19.     var d = DHlinkStatus;
  20.     var l = document.links;
  21.     for (var x = 0; x < l.length; x++) {
  22.       addEvent(l[x], 'mouseover', d.mouseOver);
  23.       addEvent(l[x], 'mouseout', d.mouseOut);
  24.     }
  25.     defaultStatus = d.defaultStatus;
  26.   }
  27.  
  28. };
  29.  
  30. function addEvent(obj, ev, funct) {
  31.   if (obj.attachEvent) obj.attachEvent('on' + ev, funct);
  32.   else if (obj.addEventListener) obj.addEventListener(ev, funct, true);
  33.   else obj['on' + ev] = funct;
  34. };
  35.  
  36. addEvent(window, 'load', DHlinkStatus.create);

Descargas: DHlinkStatus.js | demostración

El funcionamiento

Linea 3
Aquí escribimos el texto que deseamos que salga cuando no hay ningún link seleccionado. Si no quieres que salga nada, dejalo en blanco.

Lineas 5-8
Definimos el código para el evento onmouseout que simplemente pone por defecto el texto antes mencionado. Es importante devolver true, sino se ejecutara el código por defecto del navegador para este evento que en general, consiste en mostrar una cadena vacia en la barra de estado.

Lineas 10-16
El codigo que nos proporciona el efecto buscado. Para conseguirlo primero hemos de tener en cuenta como nos pasan la referencia a el link los distintos navegadores. IE nos lo pasara como la propiedad srcElement del objeto event, mientras que para el resto es this. Una vez lo tenemos, sólo hemos de asignar el texto del link a la propiedad window.defaultStatus. Para tapar todos los huecos usamos el operador binario ||. En este contexto, en vez de funcionar como un operador logico al uso, lo que hace es devolver el segundo operando si el primero es 0, null o undefined. En nuestro ejemplo concreto, primero intentamos devolver la propiedad title del link, si no existe, pasaremos el texto que contubiera usando la propiedadinnerText para IE o textContent para Firefox y si finalmente no hay ni lo uno ni lo otro (sería el caso de un link que contubiese por ejemplo una imagen), pasariamos el texto por defecto definido en la linea 3. Para finalizar, otra vez devolvemos true para que nuestro código no sea sobreescrito por el código por defecto del navegador. En Firefox/Mozilla/NS, debemos ademas de cancelar la accion por defecto del evento mediante una llamada a preventDefault().

Lineas 18-26
En las lineas 18 a 26 realizamos el ultimo paso que consiste en asignar los dos funciones anteriores a sus correspondientes eventos. Para realizarlo, solo es necesario obtener la lista de los links del documento, e ir asignandoles los correspondientes eventos.

Lineas 30-34
Aquí definimos addEvent(), función que encapsula las diferencias entre navegadores a la hora de enganchar un evento a un determinado elemento HTML. La implementacion es facil de entender. Sólo se ha de tener en cuenta al usarla que el evento se ha de especificar sin el prefijo “on”. Por ejemplo, usaremos “load” no “onload”. Para una versión más elaborada de esta función, consultar esta otra entrada en mi blog.

Linea 36
Finalmente solo nos queda enganchar el evento onload a la función DHlinkStatus.create(). Al usar la función addEvent() definida arriba, el codigo aquí mostrado no afecta a otros eventos onload que hayamos podido definir, por lo cual podemos añadir o quitar el código sin afectar al funcionamiento de páginas que ya esten funcionando y que dependan de cualquiera de los eventos que hemos utilizado.

Conclusión

Con un poco de código (menos de 1 kbyte sin los comentarios) hemos añadido un aspecto más profesional a nuestras páginas de una manera no intrusiva. Esto ultimo es muy importante a la hora de diseñar código: ha de ser lo mas genérico posible y no ha de afectar a la funcionalidad que ya tenga una web.

Compativilidad

Este código ha sido testeado satisfactoriamente en Internet Explorer 6.0 y Firefox 1.5. Supuestamente ha de funcionar en Opera y/o cualquier otro navegador que soporte el DOM, y por supuesto, todo feedback al respecto es bienvenido.

Licencia

Este código es libre de usarse y modificarse en cualquier proyecto personal o comercial siempre que se mantenga un comentario en el mismo que contenga un link a esta página y mi autoría, concretamente algo como esto:

// Código original de Ismael Jurado
// http://www.ismaelj.com/articulos/los-links-y-la-barra-de-estado/