También para esto los dos principales navegadores (Netscape y Explorer) se comportan de forma diferente a la hora de manejar capas creadas con CSS. Para asegurar la compatibilidad seguiremos utilizando el script que creamos en el apartado de mover capas:

if(document.getElementById){  // si se trata de Netscape 6
        Refcapa='document.getElementById("'
        Refestilo='").style'
        Reftop='.top'
        Refleft='.left'
}else if(document.layers){ // si se trata de Netscape 4
        Refcapa='document.'
        Refestilo=''
        Reftop='.top'
        Refleft='.left'
}else if(document.all){ // si se trata de Internet Explorer 4
        Refcapa=''
        Refestilo='.style'
        Reftop='.pixelTop'
        Refleft='.pixelLeft'
}

Ahora crearemos las funciones que permiten ocultar las capas y las que permite mostrar las capas:

function mostrarcapa(capa){
        eval(Refcapa+capa+Refestilo+'.visibility="visible"');
        }  

function ocultarcapa(capa){
        eval(Refcapa+capa+Refestilo+'.visibility="hidden"');
        }

Vamos a realizar un ejemplo del uso de esas funciones. Se trata de crear una página con dos imágenes y que al pasar con el ratón por encima de ellas salga un texto a su lado.

Primero crearemos las capas utilizando las hojas de estilos. Dos de ellas, las que contienen los textos que querremos que aparezcan, las ocultamos:

<style type=text/css>
<!--
#capa1 {position:absolute;width:100px;height:25px;top:50px;left:50px}
#capa2 {position:absolute;width:100px;height:25px;top:80px;left:50px}
#capa3 {position:absolute;width:250px;height:15px;top:50px;left:200px;
visibility:hidden}
#capa4 {position:absolute;width:250px;height:15px;top:50px;left:200px;
visibility:hidden}
//-->
</style>

Ya sólo falta colocar las imágenes y, a través de los eventos onMouseOver y onMouseOut, llamar a las funciones de mostrar capa y ocultar capa:

<div id=capa1><a href="#" onMouseOver="mostrarcapa('capa3')" onMouseOut="ocultarcapa('capa3')"><IMG SRC="recgif.gif" WIDTH="100" HEIGHT="25" BORDER="0" ALT="imagen1"></A></div>

<p><div id=capa2><a href="#" onMouseOver="mostrarcapa('capa4')" onMouseOut="ocultarcapa('capa4')"><IMG SRC="tallgif.gif" WIDTH="100" HEIGHT="25" BORDER="0" ALT="Imagen2"></a></div>

<div id=capa3>Este es el texto que quiero que aparezca si se señala la imagen de Recursos, que está arriba.</div>

<div id=capa4>Este es el texto que quiero que aparezca si se señala la imagen "Taller Web" que está en la parte de abajo.</div>

Aquí puedes ver este ejemplo.

Otro ejemplo.

Otro ejemplo.

---