Enlaces dinamicos en DHTML

18/10/04 - Enlaces con texto explicativo en una capa aparte
Realizamos un ejemplo DHTML consistente en una lista de enlaces que muestran una explicación de su contenido al pasar el ratón por encima.

En nuestra nueva línea de artículos sobre DHTML compatible para todos los navegadores, vamos a mostrar un código que serviría para crear una lista de enlaces con descripciones de su contenido. Estas descripciones estarán en una capa aparte y se visualizarían al pasar el ratón por el enlace correspondiente a cada explicación.

Dicho de otro modo, vamos a tener un conjunto de enlaces que van a ser auto-explicativos, ya que, al pasar el ratón por encima, se mostrará una capa con un texto que explique el contenido que se visualizaría al pulsar el enlace. Podemos ver el ejemplo en funcionamiento en una página aparte.

Nota: Para llevar a cabo este ejemplo vamos a utilizar las librerías del sitio web Cross-Browser (http://www.cross-browser.com), que fueron introducidas anteriormente en un artículo de DesarrolloWeb.com

Explicación del ejemplo

Vamos a ver cómo se realizaría este ejemplo. Para empezar mostramos el código para hacer la lista de enlaces explicativos.

<a href="#" onmouseover="muestra('e1')" onmouseout="oculta('e1')">Enlace 1</a>
<br>
<a href="#" onmouseover="muestra('e2')" onmouseout="oculta('e2')">Enlace 2</a>
<br>
<a href="#" onmouseover="muestra('e3')" onmouseout="oculta('e3')">Enlace 3</a>
<br>
<a href="#" onmouseover="muestra('e4')" onmouseout="oculta('e4')">Enlace 4</a>

El detalle más destacable está en los manejadores de eventos de los enlaces, que definen acciones a realizar para onmouseover y onmouseout, que corresponden con las acciones de situar el puntero del ratón encima del enlace o retirarlo del enlace, respectivamente.

Ahora vamos a ver el código HTML para la creación de las capas con las explicaciones de cada uno de los enlaces.

<div id="e1" class=recuadros style="position:absolute;left:85px;top:13px;">Explicación del enlace 1</div>
<div id="e2" class=recuadros style="position:absolute;left:85px;top:31px;">Explicación del enlace 2</div>
<div id="e3" class=recuadros style="position:absolute;left:85px;top:49px;">Explicación del enlace 3</div>
<div id="e4" class=recuadros style="position:absolute;left:85px;top:67px;">Explicación del enlace 4</div>

Nos debemos fijar en los identificadores o nombres que damos a las capas, con el atributo id del lenguaje HTML. También es interesante el atributo style, que sirve para definir, en sintaxis CSS, las propiedades de la capa. En este caso, mediante el atributo style, definimos la posición de cada una de las capas, mientras que para los otros estilos de la capa se utiliza la clase (class) "recuadros", que está definida en la declaración de estilos en la cabecera de la página.

Ahora viene la parte más importante, el código Javascript para mostrar y ocultar las capas según se sitúa o retira el ratón de los enlaces. Es un código extremadamente sencillo, pues la verdadera dificultad del ejercicio la realiza la librería de Cross-Browser, que dispone de funciones para el trabajo con capas que son compatibles con todos los navegadores.

<script type='text/javascript' src='../x/x_core.js'></script>
<script type='text/javascript'>
function muestra(capa){
xShow(capa);
}
function oculta(capa){
xHide(capa);
}
</script>

Esperamos que no asuste la sencillez de este ejemplo. Como decíamos, la complejidad principal del ejercicio se la lleva la librería para el trabajo con DHML, que se incluye como script externo en la primera línea del código anterior.

Más tarde se declaran las funciones muestra() y oculta(), que reciben el identificador de la capa a mostrar u ocultar. Estas funciones, lo único que hacen es llamar a la librería de DHTML compatible, concretamente a los procedimientos para visualizar o esconder las capas.

Ejemplo con capas de colores cambiantes

Para complicar un poco este ejemplo y hacerlo más vistoso, hemos realizado unas pequeñas modificaciones para que el color de fondo de las capas explicativas cambie durante todo el tiempo en que se visualiza la capa, con lo que crearemos un pequeño bucle de animación. Podemos ver en una página aparte el efecto que se ha buscado .

El ejemplo tiene cierta complicación porque trabaja con colores HTML, cuyos valores se componen con números en base hexadecimal. El trabajo para hacer un bucle que cambie el color se ha visto en un artículo antiguo de DesarrolloWeb.com: Degradado de color Javascript.

Para realizar este ejemplo hemos creado y modificado ligeramente una función llamada degradado(), que ya utilizamos en un artículo antiguo de DesarrolloWeb.com. Esta función se llama a si misma con un retardo, con lo que se realiza un bucle infinito de llamadas a la función degradado() y por tanto, el color cambiará indefinidamente.

Dentro de esta función se realiza el cambio de color para las capas, para lo que se utiliza una nueva función de la librería Cross-Browser llamada xBackground(), que recibe el identificador de la capa a cambiar su color de fondo y el color en hexadecimal a colocar.

El color de fondo se cambia para todas las capas en cada ejecución de la función degradado(). Este es el trozo de código donde se obtiene el nuevo color hexadecimal y se asigna como color de fondo a las capas del ejemplo.

color_mostrar = convierteHexadecimal(Math.round(color_actual[0])) + convierteHexadecimal(Math.round(color_actual[1])) + convierteHexadecimal(Math.round(color_actual[2]))
xBackground('e1',color_mostrar);
xBackground('e2',color_mostrar);
xBackground('e3',color_mostrar);
xBackground('e4',color_mostrar);

El ejemplo que estamos comentando se puede ver en una página aparte . Para ver su código completo podemos seleccionar la opción de "ver código fuente" del navegador que estemos utilizando.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 2 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba