GlassBox: bordes transparentes mediante Javascript y CSS

Vamos a explicar un pequeño script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librería jQuery).

Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).

Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).

Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librería jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.

También hemos pensado en la accesibilidad, para ello el enlace nos lleva a una página que muestra el mapa del sitio. Esta página que deberá ser dinámica, lo que hace es incluir en la parte del HTML donde se muestra la información principal (suponiendo que hay navegación y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este último archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.

Supongamos que tenemos dentro de nuestra página, el enlace en cuestión y una capa que estará oculta inicialmente mediante CSS:

<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>

También disponemos de dos páginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo código debería haber la siguiente función:

<?php require('secciones.html'); ?>

Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.

window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}

El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente:

• Cuando se carga el contenido de la capa, primero se comprueba si existe un atributo propio que hemos añadido a la capa, si no existe ese atributo entonces cargamos el contenido mediante Ajax y luego creamos ese atributo para así no tener que volver a cargar otra vez el contenido cuando pasemos el ratón sobre el enlace.
• La función $ nos permite obtener un elemento HTML, en el caso de $(“div#marco”) nos devuelve el elemento DIV cuyo id es “marco”.
• hide() oculta un elemento HTML.
• show() muestra un elemento.mouseover(funcion) añade la ejecución de la función en el evento mouseover de un elemento.
• mouseout(funcion) añade la ejecución de la función en el evento mouseout de un elemento.
• attr(texto) consulta el valor del atributo pasado como parámetro de un elemento.
• attr(código) añade el atributos y valores a un elemento.
• slideDown despliega una capa hacia abajo.
• slideUp repliega una capa hacia arriba.

Código fuente