Subrayado de enlaces (I)

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í:

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.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO

HAY 11 COMENTARIOS
  • Carlos dijo:

    Me ha gustado mucho este truco, ya que me estoy iniciando en la creación de páginas web, y estaba buscando como loco este truquillo. http://www.pikapin.com Un saludo

  • bomac dijo:

    El ejemplo no funciona en Netscape, es mas, tampoco explica como llevarlo a cabo en este navegador.

  • Patricia dijo:

    Por fin encuentro el script y en castellano. Únicamente quería saber cómo conseguir que los links no aparecieran subrayados, pero lo mismo me animo sigo la lección entera. ¡¡Gracias!!

  • Daniel dijo:

    Me ha gustado bastante lo que tengo una pregunta porque al mirar el codigo fuente en la pagina desde el navegador aparece

  • Dawer dijo:

    hola sabes soy nuevo en esto chevere comolo lograste pero hay un manera mas facil y la encontre con un poco de trabajo; las ventajas son muy notorias si desean escribanme poruqe no sabria como explicarles bien aqui y las desventajas de hacerlo con java script......

  • NeuroMan dijo:

    Me ha gustado mucho este truco y lo he utilizado en mi pagina web http://es.geocities.com/neuroman87. Pero tengo un problema que m gustaria solucionar: como puedo cambiar la url de mi web para que en vez de ser como es pueda ponerla porejemplo... www.neuroman87.com o algo asi? Gracias.

  • Yomes dijo:

    Esto se puede hacer sin tanto problema y sin JavaScrpt. Desde CSS, simplemente basta con añadir algo así: a.algo {text-decoration:none;} a:hover.algo {text-decoration:underline} Y en body: a mipagina Por poner un ejemplo, aunque se puede hacer casi de todo, desde hacer que el link cambie de posicion o de color, hasta cambiarlo de tamaño o de tipo de letra. Prueva tambien con a:visited y a:active.

  • yomes dijo:

    Esto se puede hacer sin tanto problema y sin JavaScrpt. Desde CSS, simplemente basta con añadir algo así: a.algo {text-decoration:none;} a:hover.algo {text-decoration:underline} Y en body: <a href="mipagina.htm" class="algo">a mipagina</> Por poner un ejemplo, aunque se puede hacer casi de todo, desde hacer que el link cambie de posicion o de color, hasta cambiarlo de tamaño o de tipo de letra. Prueva tambien con a:visited y a:active.

  • carolina dijo:

    he creado un dominio tk gratuito, pero cuando accedo a la web no me deja ver las paginas enlazadas a la pagina que estuy viendo, es decir, no me las redirecciona. Como pued enlazar a mi dominio tk la referencia a estos hipervinculos de mi web?

  • brenda carbajal dijo:

    quiero saber como escribir subrayado

  • MARGARITA GARCIA dijo:

    Como escribo en un cuestionario que tengo que llenar y tine rayas?

Conéctate o Regístrate para dejar tu comentario.