O primeiro a fazer é definir as funções de mostrar e ocultar. Estas duas funções, receberão por parâmetro, o nome da camada que queremos mostrar ou ocultar, a seguir, mediante a função getElementById, acessaremos às propriedades da camada, e através de style aos estilos que nos definem se a camada está visível ou não (propriedade visibility), ativando-a ou desativando-a segundo a função.
<script language="Javascript">
function mostrar(nomeCamada){
document.getElementById(nomeCamada).style.visibility="visible";
}
function ocultar(nomeCamada){
document.getElementById(nomeCamada).style.visibility="hidden";
}
</script>
A seguir é necessário definir as camadas, e chamar em algum momento às funções definidas. Utilizaremos os eventos onMouseOver e onMouseOut da camada 1 para mostrar e ocultar a camada 2.
<div id="camada1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue" onmouseout="ocultar('camada2')" onmouseover="mostrar('camada2')">Camada 1</div>
<div id="camada2" style="position:absolute;width:100;height:100;top:100;left:200;background-color:red;visibility:hidden">Camada 2</div>
Ao passar por cima da camada 1 se mostrará a 2, e ao sair da camada 1, se ocultará a dois.
Exemplo completo:
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
function mostrar(nomeCamada){
document.getElementById(nomeCamada).style.visibility="visible";
}
function ocultar(nomeCamada){
document.getElementById(nomeCamada).style.visibility="hidden";
}
</script>
</head>
<body>
<div id="camada1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue" onmouseout="ocultar('camada2')" onmouseover="mostrar('camada2')">Camada 1</div>
<div id="camada2" style="position:absolute;width:100;height:100;top:100;left:200;background-color:red;visibility:hidden">Camada 2</div>
</body>
</html>
Podemos
ver o exemplo em funcionamento.
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
