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

mudar de cor / figura ao passar o mouse

marvi

Perguntado por marvi,

 Share

Pergunta

marvi

marvi

Postado
Postado

Olá pessoal,

Nas minhas tentativas obtive um script que muda a figura do botão quando passa o mouse em cima... agora como faço para manter a figura mudada ao clicar?

Tenho esse código que muda de figura:

<script type="text/javascript">
function mouseOver()
{
document.b1.src ="img/apresentacao.jpg"
}
function mouseOut()
{
document.b1.src ="img/apresentação_vm.jpg"
}
</script>
link 
<a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver()"
onMouseOut="mouseOut()"><img border="0" src="img/apresentação_vm.jpg" name="b1"></a>

Ele muda a figura mas não fixa com a figura mudada ao clicar... o que devo fazer aí?

Obrigado!

Link para o comentário
Compartilhar em outros sites

40 respostass a esta questão

Posts Recomendados

  • 0
marvi

marvi

Postado
  • Autor
Postado (editado)

Jonathan...

Você estava tentando algo dessa forma:

<script language="JavaScript">

    function stAba(menu,conteudo)
    {
        this.menu = menu;
        this.conteudo = conteudo;
    }

    var arAbas = new Array();
    arAbas[0] = new stAba('td_cadastro','div_cadastro');
    arAbas[1] = new stAba('td_consulta','div_consulta');
    arAbas[2] = new stAba('td_manutencao','div_manutencao');

    function AlternarAbas(menu,conteudo)
    {
        for (i=0;i<arAbas.length;i++)
        {
            m = document.getElementById(arAbas[i].menu);
            m.className = 'menu';
            c = document.getElementById(arAbas[i].conteudo)
            c.style.display = 'none';
        }
        m = document.getElementById(menu)
        m.className = 'menu-sel';
        c = document.getElementById(conteudo)
        c.style.display = '';
    }

</script>

onClick="AlternarAbas('td_cadastro','div_cadastro')">

</head>

<body onLoad="AlternarAbas('td_cadastro','div_cadastro')">

Para que a cor fixada mude quando fixe outra cor de outra aba?

Eu estava tentando adaptar como esse exemplo, veja que as cores muda e fica fixa sem deixar todas cores fixa

http://conteudo.imasters.com.br/3286/20050601_abas.html

Editado por marvi
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Cara, sua condição está errada...

Você tem que zerar o valor do array antes de colocar o novo valor para true

Ao invés de:

function mouseClick(id) {
        numero = eval(id.replace("imagem", "")-1)
        x = document.getElementById(id)
        //Muda a imagem para a que foi definida no array "imagem2"
        x.src = imagens2[numero]
        //Muda o valor do array "clique" para verdadeiro
        clique[numero] = true
        
   
if(imagens2[numero]=="img/apresentacao.jpg"){
   for (i=0;i<clique.length;i++) {
            // Zera o array para salvar o novo valor que foi clicado
            clique[i] = false
         }   
}
Utilize: 
function mouseClick(id) {

   for (i=0;i<clique.length;i++) {
            // Zera o array para salvar o novo valor que foi clicado
            clique[i] = false
         }   

        numero = eval(id.replace("imagem", "")-1)
        x = document.getElementById(id)
        //Muda a imagem para a que foi definida no array "imagem2"
        x.src = imagens2[numero]
        //Muda o valor do array "clique" para verdadeiro
        clique[numero] = true

Se funcionar, posta aí !

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

marvi

Postado
  • Autor
Postado (editado)

Veja como está: http://www.ideiabiz.com/s.htm a mesma coisa... só mudou que ao passar o mouse não fixa mais...

mas se clico em outra aba ele fixa e não fica azul de novo se eu clicar em outra aba... entendeu? só pode ficar vermelho a aba que foi clicada... se clico em outra aba a antiga fica azul e a aba atual fica vermelha...e assim vai

Eu estava tentando adaptar como esse exemplo, veja que as cores muda e fica fixa sem deixar todas cores fixa

http://conteudo.imasters.com.br/3286/20050601_abas.html

Editado por marvi
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado (editado)

Olhei o seu código-fonte

Tinha esquecido de uma coisa:

Naquele loop além de zerar o array deveria voltar para a imagem anterior também

Ao invés de:

for (i=0;i<clique.length;i++) {

            // Zera o array para salvar o novo valor que foi clicado
            clique[i] = false

         }
Faça isso: 
for (i=0;i<clique.length;i++) {
            // Zera o array para salvar o novo valor que foi clicado
            clique[i] = false
            // Volta para a imagem original
            mouseOut('imagem'+eval(i+1))
         }

Se funcionar, posta aí !

Agora acho que vai funcionar...

Quando você pode ver o exemplo em funcionamento fica mais fácil corrigir os erros^^

Editado por Jonathan Queiroz
Link para o comentário
Compartilhar em outros sites
  • 0
marvi

marvi

Postado
  • Autor
Postado (editado)

É verdade! Falta era isso, funcionou bem!

Não coloquei mas no ar lá não... acho que agora está ok!

Muito obrigado mesmo! Essas abas vão quebrar um galho para monte de gente!

Agora não entendi essa linha que você falou: mouseOut('imagem'+eval(i+1)) o que ele fala aí?

Eu posso deixar umas das abas já selecionada quando carregar a página e depois a pessoa vai mudando?

Editado por marvi
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Respondendo às perguntas:

1.Agora não entendi essa linha que você falou: mouseOut('imagem'+eval(i+1)) o que ele fala aí?
Essa linha chama automaticamente a função "mouseOut" com todas as imagens (isso ocorre a partir do loop)

Eu posso deixar umas das abas já selecionada quando carregar a página e depois a pessoa vai mudando?

Você usa alguma linguagem de lado servidor no site ??

Se usar fica mais fácil, é só passar a partir de um campo hidden ou mesmo via QueryString

Se não usar, acredito que a solução seria salvar em cookies

O único problema é que pode não ser compatível com todos os navegadores...

Qualquer coisa é só postar !

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

marvi

Postado
  • Autor
Postado (editado)

ssa linha chama automaticamente a função "mouseOut" com todas as imagens (isso ocorre a partir do loop)

Então é no "mouseOut" que estão as figuras originais, ou seja, a azul... pois é quando se tira o mouse da aba... ok

Você usa alguma linguagem de lado servidor no site ??

Estou usando o ASP... mas você quer que eu envie que dado? Para deixar um certo botão clicado? vou avisar o javascript sobre isso?

O que falo é que poderia ser a Aba apresentação sempre fixa, como se ela estivesse clicada... até que se clique em outra aba, entende?

Aprendendo o código...

Aqui pego as imagens vermelhas do array imagens 2

function mouseOver(id) {

numero = eval(id.replace("imagem", "")-1)

x = document.getElementById(id)

x.src = imagens2[numero]

}

Aqui é uma função de clique que conserva a imagem 2, vermelha, fixa e ao mesmo tempo faz com que outras abas que tem imagens 2 volte ater o array de imagens que é azul, isso?

function mouseClick(id) {

for (i=0;i<clique.length;i++) {

clique = false

mouseOut('imagem'+eval(i+1))

}

numero = eval(id.replace("imagem", "")-1)

x = document.getElementById(id)

x.src = imagens2[numero]

clique[numero] = true

}

function mouseOut(id) {

numero = eval(id.replace("imagem", "")-1)

if (clique[numero]==false) {

x = document.getElementById(id)

x.src = imagens[numero]

}

}

Editado por marvi
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Se você está usando ASP, você pode criar um campo do tipo "Hidden" em um formulário e depois resgatar seu valor a partir do Request.Form()

Sempre na função "mouseClick", você modifica o valor do campo "hidden"

Aí é só criar uma função para quando a página for iniciada (onload do body) e verificar o campo "hidden" !

Se não conseguir, posta aí !

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

marvi

Postado
  • Autor
Postado

Eu não entendi... tem algum exemplo? Pois quem é responsável pelo clique fixo é essa função:

function mouseClick(id) {

for (i=0;i<clique.length;i++) {

clique = false

mouseOut('imagem'+eval(i+1))

}

numero = eval(id.replace("imagem", "")-1)

x = document.getElementById(id)

x.src = imagens2[numero]

clique[numero] = true

}

O que faz nessa função ficar clicado? pois ai eu poderia fazer um onload mouseClick... algo assim não? já com um valor de um clique...

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Dá uma olhada nesse código aqui:

<html>
<head>
<script type="text/javascript">
var clique = new Array(false, false, false, false, false, false, false)
var imagens = new Array("apresentacao.jpg", "apresentacao2.jpg", "apresentacao3.jpg",
"apresentacao4.jpg", "apresentacao5.jpg", "apresentacao6.jpg", "apresentacao7.jpg")
var imagens2 = new Array("apresentacao_mouseover1.jpg", "2.jpg", "3.jpg", "4.jpg",
"5.jpg", "6.jpg", "7.jpg")
function mouseOver(id) {
        numero = eval(id.replace("imagem", "")-1)
        x = document.getElementById(id)
        x.src = imagens2[numero]
}
function mouseClick(id) {
        for (i=0;i<clique.length;i++) {
            // Zera o array para salvar o novo valor que foi clicado
            clique[i] = false
            mouseOut('imagem'+eval(i+1))
         }
        numero = eval(id.replace("imagem", "")-1)
        x = document.getElementById(id)
        //Muda a imagem para a que foi definida no array "imagem2"
        x.src = imagens2[numero]
        //Muda o valor do array "clique" para verdadeiro
        clique[numero] = true
        form.valor_escondido.value = "imagem"+eval(numero+1)
}
function mouseOut(id) {
        numero = eval(id.replace("imagem", "")-1)
        if (clique[numero]==false) {
            x = document.getElementById(id)
            //Muda a imagem para a definida no array "imagens"
            x.src = imagens[numero]
        }
}
function Carrega() {
// Pega o valor via ASP
valor_escondido = "<%=Request.Form("valor_escondido")%>"
// Salva os dados para se o usuário recarregar a página novamente
form.valor_escondido.value=valor_escondido
// Coloca a imagem novamente
mouseClick(valor_escondido)
}
</script>
</head>
<body>
<form name="form" action="" method="post" onload="Carrega()">
<input type="hidden" name="valor_escondigo" value="">
</form>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%" id="AutoNumber2" height="1">
  <tr>
        <td id="colEndereco" width="14%" height="1">
            <a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver('imagem1')"
            onMouseOut="mouseOut('imagem1')" onClick="mouseClick('imagem1')">
                <img border="0" src="img/apresentação_vm.jpg" name="imagem1" id="imagem1">
            </a>
        </td>

        <td width="14%" height="1">
            <a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver('imagem2')"
        onMouseOut="mouseOut('imagem2')" onClick="mouseClick('imagem2')">
                <img border="0" src="img/imagens.jpg" name="imagem2" id="imagem2">
            </a>
        </td>
   
  </tr>
</table>
</body>
</html>

Obs.:

Não cheguei a testar, mas deve funcionar

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

marvi

Postado
  • Autor
Postado (editado)

Mas tem alguma coisa errada.... primeiro o que é valor_escondido para ele? E como ele vai fazer um submit no form se só estou atualizando a página?

esse valor_escondido = "<%=Request.Form("valor_escondido")%>" só funciona se há um submit do form...

Você só estar carregando a função no body onload="Carrega()", mas o request.form só ira funcionar se ocorrer um submit do formulário, coisa que não acontece já que o formulário está na mesma página e no máximo há um carregamento da página, entendeu?

O que quero é que quando entrar na páginas das abas, uma das abas já esteja ativa e as outras só ativa quando for clicando...

Resolvir de uma maneira 'tosca"... descobrir qual o valor do form.valor_escondido.value para primeira aba e era imagem1

Então, fiz o seguinte:

function Carrega() {

valor_escondido = "imagem1"

form.valor_escondido.value=valor_escondido

mouseClick(valor_escondido)

}

E ela ficou com a aba apresentação, no caso, vermelha... mas isso não fez com que ativasse a ação da minha DIV, pois cada clique em uma aba chama uma div:

Link da ABA

<td id="colEndereco1" width="28" >

                                                                                      
                                      

          <a href="java script:selTab('tabEndereco')"   onMouseOver="mouseOver('imagem1')" onMouseOut="mouseOut('imagem1')" onClick="mouseClick('imagem1')">
                <img border="0" src="img/apresentacao_vm.jpg" name="imagem1" id="imagem1"></a>
                
                                                           </td>

Veja que tenho um link: java script:selTab('tabEndereco')" que corresponde a minha div:

<div name="tabEndereco" id="tabEndereco" style="display:none">

conteudo de apresentação...

</div>

Mas, preciso deixar essa div clicada também e não só a cor vermelha do botão...

ninguém sabe como chamar uma DIV em função?

<div name="tabEndereco" id="tabEndereco" style="display:none">

conteudo de apresentação...

</div>

Editado por marvi
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,3k
    • Posts
      652,3k
×
×
  • Criar Novo...