Subrayado de enlaces (I)

1 . Lo primero: que los enlaces no estén subrayados
2 . Cómo subrayar en Explorer 4
3 . Cómo subrayar en Netscape Gecko

Leyendo esta página aprenderás a hacer enlaces que se subrayen automáticamente cuando pasas el ratón por encima. Aún funcionando sólo con Explorer 4 y la versión pre-alpha del Netscape 5, este truco es lo suficientemente interesante para ponerlo en tus páginas y suficientemente inocuo para que a aquellos que no puedan verlo no les afecte demasiado.

Lo primero: que los enlaces no estén subrayados

Parece lógico que nuestra primera necesidad sea conseguir que nuestros enlaces no estén subrayados para poder subrayarlos después. Como tantas otras cosas, esto lo conseguiremos por medio de hojas de estilo. Crearemos una clase de la etiqueta A de este modo:

<STYLE TYPE="text/css">
  A.link  { text-decoration: none; }
</STYLE>

Añadiendo a todas nuestras etiquetas A el parámetro CLASS="link" lograremos que no estén subrayadas.

Cómo subrayar en Explorer 4

Este es el código necesario:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Se esconde el codigo a navegadores antiguos
  function encender(e) {
    src = event.srcElement;
    if (src.tagName == "A") {
      src.style.textDecoration = "underline";
    }
  }

  function apagar(e) {
    src = event.srcElement;
    if (src.tagName == "A") {
      src.style.textDecoration = "none";
    }
  }

  document.onmouseover=encender;
  document.onmouseout=apagar;
// -->
</SCRIPT>

Es un poco complicado y requiere algunas explicaciones. Las dos últimas líneas provocarán que, cuando pasemos el ratón por algún elemento se llame a la función encender, haciendo lo mismo en el caso de que nos vayamos del elemento, momento en el que se llamará a apagar.

Cada una de las funciones reconoce que elemento les ha llamado por medio de la línea src = event.srcElement. event contiene toda la información del evento que ha ocurrido en el documento y, entre ella, una referencia al elemento que la ha provocado. Si el elemento en cuestión a resultado ser un enlace (if (src.tagName == "A")), procedemos a cambiar el estilo del mismo: src.style.textDecoration = "loquecorresponda". De este modo nuestros enlaces quedarán tal que así:

• Recursos
• Documentación
• Taller Web

Cómo subrayar en Netscape Gecko

Gecko es una versión pre-alpha del próximo navegador de Netscape. Tiene muchas mejores en todos los aspectos, y entre ellas podemos encontrar que existe un modo de subrayar los enlaces. Es el siguiente:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Se esconde el codigo a navegadores antiguos
  function encender(e) {
    this.style.textDecoration = "underline";
  }

  function apagar(e) {
    this.style.textDecoration = "none";
  }

  function inicializarEnlaces() {
    var links = document.getElementsByTagName("A");
    for (var i=0; i<links.length; i++) {
      links[i].onmouseover=encender;
      links[i].onmouseout=apagar;
    }
  }

  window.onload = inicializarEnlaces;
// -->
</SCRIPT>

Como veis algunas cosas son más sencillas y otras más complicadas. En el fondo hace lo mismo que el Explorer, pero en sitios distintos. Mientras en el Explorer se llamaba a encender cuando el ratón pasaba por encima de cualquier elemento, aquí discriminamos antes el elemento (con algo de trabajo) y así nos ahorramos el tener que mirarlo en el código de las funciones.

Lo último que queda es integrar ambos scripts de modo en uno que funcione en ambos navegadores. Os lo dejo, como suele decirse, como ejercicio al lector. La solución la veréis examinando el código fuente de esta página.