|
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í:
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.
![]() |
Publicado por: Administrador |
|
|
Como escribo en un cuestionario que tengo que llenar y tine rayas?
quiero saber como escribir subrayado
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?
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.
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.
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.
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......
Me ha gustado bastante lo que tengo una pregunta porque al mirar el codigo fuente en la pagina desde el navegador aparece
Datos legales | Politica de privacidad | Contacte con nosotros | Publicidad
Diseño web y desarrollo web. Un proyecto de los hermanos Carrero.
Red internet: Juegos gratis | Servidores dedicados
Más internet: Password | Directorio de weblogs | Favicon













































