Ir para conteúdo

POWERED BY:

Arquivado

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

phrafa

Onmouseover e Onmouseout

Por , em Javascript

Recommended Posts

phrafa    0

phrafa
Postado

Bom Dia Galera

 

estou com o seguinte script:

 

<script type="text/javascript">
function exibe(id) {
	if(document.getElementById(id).style.display=="none") {
		document.getElementById(id).style.display = "inline";
	}
	else {
		document.getElementById(id).style.display = "none";
	}
}
</script>
</head>

<body>
 <ul class="kwicks">  
     <li id="menu1"><a href="#rs" onmouseover="javascript: exibe('home') ;"">Home</a></li>

 

Está funcioando 75%, o problema é no Onmouseout quero inclui-lo,

 

quando passo o mause abre a div, agora como eu faço para quando tirar o mause a div fechar

 

OBS: o codigo nesse jeito está 75% pronto pq ele abre a div normal (quando passo o mause) e só fecha si eu tirar e colocar o mause de novo

 

Queria ki ver ela Ocultar quando eu tirar o mause

 

valew no aguardo OBRIGADO...

Compartilhar este post

Link para o post
Compartilhar em outros sites

phrafa    0

phrafa
Postado

Olá amigo, tenta assim:

 

 <li id="menu1"><a href="#rs" onmouseover="javascript: exibe('home') ; onmouseout="javascript: exibe('home') ;"">Home</a></li>

naum funciona :( esse foi um dos metodos ki eu tentei sera ki deve ser editado na TAG <scritp> </script> ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<li id="menu1"><a href="#rs" onmouseover="exibe('home');" onmouseout="exibe('home');">Home</a></li>
são 2 eventos distintos...

 

a tua função, eu mudaria para:

function exibe( id ) 
{
        var el = document.getElementById( id );
        el.style.display = el.style.display=='none' ? 'block' : 'none';
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

phrafa    0

phrafa
Postado 

<li id="menu1"><a href="#rs" onmouseover="exibe('home');" onmouseout="exibe('home');">Home</a></li>
são 2 eventos distintos...

 

a tua função, eu mudaria para:

function exibe( id ) 
{
        var el = document.getElementById( id );
        el.style.display = el.style.display=='none' ? 'block' : 'none';
}

a Função não retorna nada, a DIV naum abre nem oculta

 

:/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<html>

<head>

<script type="text/javascript">

function id( el ){

return document.getElementById( el );

}

function exibe( id_el )

{

var el = id( id_el );

el.style.display = el.style.display=='none' ? 'block' : 'none';

}

window.onload = function()

{

id('home').style.display = 'none';

id('contato').style.display = 'none';

}

</script>

</head>

<body>

<ul class="kwicks">

<li id="menu1"><a href="#home" onmouseover="exibe('home');" onmouseout="exibe('home');">Home</a></li>

<li id="menu2"><a href="#contato" onmouseover="exibe('contato');" onmouseout="exibe('contato');">Contato</a></li>

</ul><!-- /kwicks -->

<div id="home">

conteudo da home

</div><!-- /home -->

 

<div id="contato">

conteudo do contato

</div><!-- /contato -->

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

A solução apontada pelo @augustoclaro funciona perfeitamente.

Se o script está inserido na seção head do documento certifique-se de que ele espera o carregamento da página.

Use window.onload=function() {}, por exemplo, ou coloque o script antes da tag de fechamento de BODY.

 

Editado: Ops! O @William Bruno alterou sua resposta e agora também funciona.

Compartilhar este post

Link para o post
Compartilhar em outros sites

phrafa    0

phrafa
Postado

funcionou o problema que perdeu toda a formataçâo do menu a div abre e oculta de forma desorganizada, está dificil configurar o menu Segue o Script Completo

 

<title>Menu - Phrafa</title>
<script type="text/javascript">function id( el ){   
return document.getElementById( el );}function exibe( id_el ) {    
var el = id( id_el );      el.style.display = el.style.display=='none' ? 'block' : 'none';}window.onload = function(){  
	id('home').style.display = 'none';    
	id('contact').style.display = 'none';}
 </script>

</head>

<body>
 <ul class="kwicks">  
     <li id="kwick1"><a href="#home" onmouseover="exibe('home');" onmouseout="exibe('home');">Home</a</li>   
     <li id="kwick2"><a href="#">Contact</a></li>  
     <li id="kwick3"><a href="#">Downloads</a></li>  
     <li id="kwick4"><a href="#">Search</a></li>  
 </ul>  

<table width="60%"  border="0">
  <tr>
    <th bgcolor="#CCCCCC" scope="row"><div class="style1" id="home" style="display: none;">
   <ul class="kwicks">  
     TESTE  
 </ul>
    </div>

Obrigado Pela Atenção

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

estude HTML e CSS

com essa marcação toda bagunçada, fica dificil fazer algo bom mesmo.

 

elimine essa <table> dai.

 

@edit:

pelo que tô entendendo do que você quer, é diferente do funcionamento que você apresentou primeiro.

 

ao passar o mouse sobre 'Home', o conteudo de Home fica lá.

ai ao passar sobre 'Contato', some o home, mas o contato continua, mesmo tirando o mouse de cima do menu contato, e indo para dentro da página.

 

estou certo ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

phrafa    0

phrafa
Postado

Sim é Isso mesmo tipo esse memu aqui Clique aqui

 

Tenho que estudar mais css e html to no inicio por isso a dificuldade de criar um menu

estou indo somente por apostila

 

Valeu Cara pela Ajuda :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

então é diferente das 2 coisas que eu tinha pensado... ¬¬

 

você quer um menu com submenu, em dropdown!

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1369661

 

qndo for assim, além do problema que está tendo, explica oque você quer fazer ^_^

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