Ir para conteúdo
Fórum Script Brasil
  • 0

Menu Alterando A Cada Click Do Mouse

Thiago Ribeiro

Perguntado por Thiago Ribeiro,

 Share

Pergunta

Thiago Ribeiro

Thiago Ribeiro

Postado
Postado (editado)

Estou com um grande problema para conseguir fazer um menu... :unsure:

Ainda não entendo muito bem de programação em HTML - JAVASCRIPT - CSS etc... somente o básico do básico mesmo....

O caso é o seguinte fiz um menu com imagens.... criei os eventos mouseover e mouseout através do próprio Dreamweaver ( Insert / Image Objetcts / Rollover Image)....

Ele resolve quase todo meu problema... acontece que o meu menu 8 itens e eu gostaria que quando clicasse em um dos links ele fica-se estático marcado com uma imagem como se desse a impressão do botão estar clicado e não mudasse mais até clicar em outro link, servindo para mostrar ao visitante em qual sessão está...

ex:

normal - image01.gif

passando mouse por cima - image02.gif

tirando mouse de cima - image01.gif

link selecionado - image02.gif

01 - Assim ficaria normalmente sem passar o mouse por cima dos botões do menu ou também depois de passado o mouse por eles:

post-27372-1173879373_thumb.jpg

02 - Desta forma é o efeito que eu consegui fazer quando passa o mouse pelos botões do menu, e também é a forma que eu quero que eles permaneção quando clicarem no link mostrando ao visitante aonde ele está navegando... até clicarem em outro link fazendo com que esse volte a imagem original igual no exemplo acima tornando somente o próximo link clicado com o efeito de selecionado como mostra a seguir:

post-27372-1173879398_thumb.jpg

03 - Efeito de outro link clicado fazendo o anterior voltar a imagem inicial:

post-27372-1173879403_thumb.jpg

Agradeços desde já toda e qualquer ajuda, mas é porque eu realmente não entendo quase nada disso... :unsure:

Thiago Ribeiro

Editado por Thiago Ribeiro
Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
Thiago Ribeiro

Thiago Ribeiro

Postado
  • Autor
Postado

Andreia a idéia é quase essa, mas justamente essa é a parte que eu já tinha conseguido fazer.

O meu problema agora está em fazer com que a imagem troque ao clicar e continue com a mesma imagem da ação do "onMouseOver" até a hora que o visitante clique em outro link fazendo com que a imagem anterior volte para a mesma da função do "onMouseout" e agora trocando a imagem para "onMouseOver" do outro botão clicado e assim vai.

Obrigado,

Thiago Ribeiro

Link para o comentário
Compartilhar em outros sites
  • 0
.Andreia.

.Andreia.

Postado
Postado

você usa 3 eventos: onclick, onmouseover e onmouseout.

O onmouseover e onmouseout tranquilo, voce faz... mas quando voce coloca o onclick, o que acontece é que ele vai ser cancelado pelo onmouseout....

ate agora não imaginei uma boa saida pra isso, quem tiver uma ideia posta aí

Link para o comentário
Compartilhar em outros sites
  • 0
Mestre SAM

Mestre SAM

Postado
Postado

minha contribuicao, hehe

fiz um pequeno teste agora,

mas ao invés de imagens usei cores.

<html>
<head>
<title>teste</title>
</head>

<script language="javascript">
var cor;

function alteraCor(obj) {
    if ( obj.style.color=="#009900" ) cor = true;
    
    obj.style.color="#009900";
}

function retornaCor(obj) {
    if ( cor != true ) obj.style.color="#FFCCFF";
    
    cor = false;
}

function mantemCor(obj) {
    tiraCorDeTodos(obj);
    
    cor = true;
}

function tiraCorDeTodos(obj) {
    var todosTd = document.getElementsByTagName('td');

    for ( var i = 0; i < todosTd.length; i++ ) {
        if ( obj != todosTd[i] ) todosTd[i].style.color="#FFCCFF";
    }
}
</script>

<body>

<table>
    <tr>
        <td style="color:#FFCCFF;" onmouseover="alteraCor(this);" onmouseout="retornaCor(this);" onclick="mantemCor(this);">menu 1</td>
        <td style="color:#FFCCFF;" onmouseover="alteraCor(this);" onmouseout="retornaCor(this);" onclick="mantemCor(this);">menu 2</td>
        <td style="color:#FFCCFF;" onmouseover="alteraCor(this);" onmouseout="retornaCor(this);" onclick="mantemCor(this);">menu 3</td>
    </tr>
</table>

</body>
</html>

não sei se precisa explicar alguma coisa,

o codigo está bem facil de entender.

agora é só adaptar as necessidades de cada um.

sucesso ai,

Link para o comentário
Compartilhar em outros sites
  • 0
Thiago Ribeiro

Thiago Ribeiro

Postado
  • Autor
Postado
minha contribuicao, hehe

fiz um pequeno teste agora,

mas ao invés de imagens usei cores.

<html>
<head>
<title>teste</title>
</head>

&lt;script language="javascript">
var cor;

function alteraCor(obj) {
    if ( obj.style.color=="#009900" ) cor = true;
    
    obj.style.color="#009900";
}

function retornaCor(obj) {
    if ( cor != true ) obj.style.color="#FFCCFF";
    
    cor = false;
}

function mantemCor(obj) {
    tiraCorDeTodos(obj);
    
    cor = true;
}

function tiraCorDeTodos(obj) {
    var todosTd = document.getElementsByTagName('td');

    for ( var i = 0; i < todosTd.length; i++ ) {
        if ( obj != todosTd[i] ) todosTd[i].style.color="#FFCCFF";
    }
}
</script>

<body>

<table>
    <tr>
        <td style="color:#FFCCFF;" onmouseover="alteraCor(this);" onmouseout="retornaCor(this);" onclick="mantemCor(this);">menu 1</td>
        <td style="color:#FFCCFF;" onmouseover="alteraCor(this);" onmouseout="retornaCor(this);" onclick="mantemCor(this);">menu 2</td>
        <td style="color:#FFCCFF;" onmouseover="alteraCor(this);" onmouseout="retornaCor(this);" onclick="mantemCor(this);">menu 3</td>
    </tr>
</table>

</body>
</html>

não sei se precisa explicar alguma coisa,

o codigo está bem facil de entender.

agora é só adaptar as necessidades de cada um.

sucesso ai,

Cara MUITO obrigado mesmo...

Devido a minha falta de conhecimento ainda com javascript demorei um pouco aqui para conseguir encaixar as coisas para ao invés de cores ser com as imagens... Mas graças a esse código acabei conseguindo... =)

Obrigado mesmo Mestre SAM e a Andreia também... :lol:

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...