Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MarKteus

Como esconder e exibir uma DIV´s ?

Por , em Javascript

Recommended Posts

MarKteus    1

MarKteus
Postado

Oi

 

Gente seguinte:

 

Criei 5 DIV´s e em cada uma delas coloquei informaçôes (textos), e elas estão aparecendo uma ao lado da outra, gostaria de fazer o seguinte:

 

Esconder uma DIV atraz da outra e só exibi-la qdo o mouse fosse colocado sobre uma determinada opção de um menu q está em outra DIV é possível ? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado 

document.getElementById("IdDaDiv").style.display = "block";   // mostradocument.getElementById("IdDaDiv").style.display = "none";   // esconde

Ps.: Que decoração de texto mais sem sentido... acho que por isso ninguém te respondeu antes O.o

Compartilhar este post

Link para o post
Compartilhar em outros sites

Megadeth    2

Megadeth
Postado

você colocaria isso nos eventos 

onmouseover = mostradiv() e onmouseout = escondediv()
<script>

function mostradiv()

{

document.getElementById("IdDaDiv").style.display = "block";

}

function escondediv()

{

document.getElementById("IdDaDiv").style.display = "none";

}

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Megadeth eu sei que você e o Fleury já tinham respondido, mas eu queria colocar um exemplo dinâmico.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Menu e divs</title> <style type="text/css"> div{	display: none;	border: 1px solid #000000;}ul{	width: 60px;	border: 1px solid #000000;}ul li{	list-style: none;	height: 20px;}</style><script type="text/javascript">mostraDivs = function(){	var menu = document.getElementById("menu").getElementsByTagName("a");	for(i = 0; i < menu.length; i++)	{		menu[i].onmouseover = function()		{			document.getElementById(this.rel).style.display = "block";		}				menu[i].onmouseout = function()		{			document.getElementById(this.rel).style.display = "none";		}	}}</script></head> <body onload="mostraDivs();"><ul id="menu">	<li><a href="#" rel="div1">Div 1</a></li>	<li><a href="#" rel="div2">Div 2</a></li>	<li><a href="#" rel="div3">Div 3</a></li>	<li><a href="#" rel="div4">Div 4</a></li></ul><br /><br /><div id="div1">Div 1</div><div id="div2">Div 2</div><div id="div3">Div 3</div><div id="div4">Div 4</div></body> </html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito