mudar de cor / figura ao passar o mouse

marvi · Novembro 7, 2008

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!

Jonathan Queiroz · Novembro 7, 2008

Define uma variável quando o usuário clicar

Aí quando o usuário mexer o mouse você verifica o valor dessa variável antes de mudar a imagem

marvi · Novembro 7, 2008

Me desculpa Jonathan... mas não entendi bem... você poderia me explicar, mostra um exemplo basico aqui?

Pois passar o mouse ele mudar a cor e tirar o mouse ele volta a cor ou a figura original...Mas, ao clicar deveria mudar a cor ou figura novamente e fixar essa...

Editado Novembro 7, 2008 por marvi

fercosmig · Novembro 7, 2008

testa ae cara... nem testei

function mouseOver(){
   if (!(pressionado))
   document.b1.src ="img/apresentacao.jpg"
}

function mouseOut(){
   if (!(pressionado))
   document.b1.src ="img/apresentação_vm.jpg"
}

function muda(){
   if (document.b1.src == 'img/apresentacao.jpg'){
      document.b1.src ='img/apresentação_vm.jpg';
      pressionado = true;
   }else{
      document.b1.src ='img/apresentacao.jpg;
      pressionado = false;
   }
}

<a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver()"
onMouseOut="mouseOut()" onclick="muda()"><img border="0" src="img/apresentação_vm.jpg" name="b1"></a>

marvi · Novembro 7, 2008

Quando eu coloquei essa parte, ele parou de trocar de figuras...

function muda(){
   if (document.b1.src == 'img/apresentacao.jpg'){
      document.b1.src ='img/apresentação_vm.jpg';
      pressionado = true;
   }else{
      document.b1.src ='img/apresentacao.jpg;
      pressionado = false;
   }
}

Assim nem passei para outra etapa que era para ver se ele fixa a figura trocada... qual deve ser o erro?

Jonathan Queiroz · Novembro 7, 2008

Testa aí o que o fercosmig fez

Era mais ou menos isso que estava tentando explicar

Se não conseguir adaptar o script posta aí !

marvi · Novembro 7, 2008

Fiz assim e não fixou:

<script type="text/javascript">
function mouseOver()
{
document.b1.src ="img/apresentacao.jpg"
}
function mouseOut()
{
document.b1.src ="img/apresentação_vm.jpg"
}
function muda(){
   if (document.b1.src == 'img/apresentacao.jpg'){
      document.b1.src ='img/apresentação_vm.jpg';
      pressionado = true;
   }else{
      document.b1.src ='img/apresentacao.jpg';
      pressionado = false;
   }}

</script>

Editado Novembro 7, 2008 por marvi

Jonathan Queiroz · Novembro 7, 2008

Posta aí o código todo pra dar uma olhada ...

Mas parece que você não colocou as condicionais e algumas funções

marvi · Novembro 7, 2008

Pronto, fiz assim e funcionou bem!

<script type="text/javascript">
var click = 0;
function mouseOver() {
    document.b1.src ="img/apresentacao.jpg"
}
function mouseClick() {
    document.b1.src ="img/apresentacao.jpg"
    click = 1;
}
function mouseOut() {
    if(click==0)
        document.b1.src ="img/apresentação_vm.jpg"
}

</script>

Deu certo! Obrigado!

marvi · Novembro 7, 2008

Novo problema, coloquei a mesma coisa no outro link. Eu deveria ter analisado que quando eu clico no outro link o outro que estava fixo tem que voltar ao seu normal...

<script type="text/javascript">
var click = 0;
function mouseOver() {
    document.b1.src ="img/apresentacao.jpg"
}
function mouseClick() {
    document.b1.src ="img/apresentacao.jpg"
    click = 1;
}
function mouseOut() {
    if(click==0)
        document.b1.src ="img/apresentação_vm.jpg"
}

</script>
<script type="text/javascript">
var click = 0;
function mouseOver1() {
    document.b2.src ="img/imagens_vm.jpg"
}
function mouseClick1() {
    document.b2.src ="img/imagens_vm.jpg"
    click = 1;
}
function mouseOut1() {
    if(click==0)
        document.b2.src ="img/imagens.jpg"
}

</script>
<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()"
onMouseOut="mouseOut()" onClick="mouseClick()"><img border="0" src="img/apresentação_vm.jpg" name="b1"></a></td>

    <td width="14%" height="1">
    
    
   <a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver1()"
onMouseOut="mouseOut1()" onClick="mouseClick1()"> <img border="0" src="img/imagens.jpg" name="b2"></a>
    
    
    
    </td>

Veja o exemplo:

Correto, cliquei e ficou vermelho:

Agora incorreto por dois motivos: primeiro porque o que já estava em vermelho "apresentação" deveria voltar a ficar azul, segundo porque o botão "imagens" ficou vermelho sem eu clicar, só porque passei o mouse nele para ver se ele muda a cor e volta... sendo assim mudou, mas não voltou a cor original que é a figura azul...

E agora?

Editado Novembro 7, 2008 por marvi

Jonathan Queiroz · Novembro 7, 2008

Você vai usar só dois links ??

Se for usar somente dois, crie uma variável para cada link e faça as modificações pelo ID do item

Se for usar mais de dois, crie um vetor e salve também o ID de cada link

Se não conseguir, posta aí

marvi · Novembro 7, 2008

vou usar ate 7 links...

Na verdade não sei como resolver isso assim... achava que deveria ir na sequencia já que só bastava mudar os nomes das funções...

como seria isso?

Jonathan Queiroz · Novembro 7, 2008

Não precisa isso...

Você pode fazer de forma mais simples...

Posta aí como o código tá com todos os links q eu posso adaptar (passa sem criar uma função pra cada coisa, farei um script para isso sem necessitar de tantas funções)

marvi · Novembro 7, 2008

Veja o exemplo:

Correto, cliquei e ficou vermelho:

Agora incorreto por dois motivos: primeiro porque o que já estava em vermelho "apresentação" deveria voltar a ficar azul, segundo porque o botão "imagens" ficou vermelho sem eu clicar, só porque passei o mouse nele para ver se ele muda a cor e volta... sendo assim mudou, mas não voltou a cor original que é a figura azul...

E agora?

<script type="text/javascript">
var click = 0;
function mouseOver() {
    document.b1.src ="img/apresentacao.jpg"
}
function mouseClick() {
    document.b1.src ="img/apresentacao.jpg"
    click = 1;
}
function mouseOut() {
    if(click==0)
        document.b1.src ="img/apresentação_vm.jpg"
}

</script>

<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()"
onMouseOut="mouseOut()" onClick="mouseClick()"><img border="0" src="img/apresentação_vm.jpg" name="b1"></a></td>

    <td width="14%" height="1">
    
    
   <a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver1()"
onMouseOut="mouseOut1()" onClick="mouseClick1()"> <img border="0" src="img/imagens.jpg" name="b2"></a>
    
    
    
    </td>
    
    <td width="14%" height="1"><img border="0" src="img/plantas.jpg"></td>
    
    <td width="14%" height="1"><img border="0" src="img/ilustracoes.jpg"></td>
    
    <td width="14%" height="1"><img border="0" src="img/videos.jpg"></td>
    
    <td width="15%" height="1"><img border="0" src="img/localizacao.jpg"></td>
    
    <td width="15%" height="1"><img border="0" src="img/precos.jpg"></td>
    
  </tr>
</table>

a função:

function selTab(tab)
{
                        //o elemento abaixo é div, porque as abas estão dentro de um div.
                        tabs = document.getElementsByTagName("div");
                        //aqui cai no que eu já tinha dito: você poderá ter quantas abas quiser. Aqui simplesmente contará quantas abas você tem.
                        for (n=0;n < tabs.length;n++)
                        {
                                   //aqui vai comparar se o nome do id do seu div é igual a aba que você selecionou. Se for, ele vai mostrar o conteúdo da aba selecionada. Caso contrário, não exibe nada.
                                   if (tabs[n].id == tab)
                                   {
                                               tabs[n].style.display = "inline";
                                               document.getElementById('col' + tab.substring(3,tab.length)).style.borderBottom = "none";
                                               document.getElementById('col' + tab.substring(3,tab.length) + '1').style.borderBottom = "none";
                                   }
                                   else
                                   {
                                               tabs[n].style.display = "none";
                                               document.getElementById('col' + tabs[n].id.substring(3,tabs[n].id.length)).style.borderBottom = "black 1px solid";
                                               document.getElementById('col' + tabs[n].id.substring(3,tabs[n].id.length) + '1').style.borderBottom = "black 1px solid";
                                   }
                        }
}

Editado Novembro 7, 2008 por marvi

Jonathan Queiroz · Novembro 7, 2008

Pronto !

Terminei o script

Não tenho certeza se vai funcionar (testei apenas pra ver se detectava erros no navegador, mas não cheguei a testar por não estar com as imagens aqui...)

Mesmo assim, qualquer coisa é só postar !

Tenta algo como isso 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) {
        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 (click[numero]==false) {
            x = document.getElementById(id)
            x.src = imagens2[numero]
        }
}

</script>
</head>
<body>
<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.:

Complete com o nome das imagens que você quer (só tem duas colunas, mas você pode colocar até sete sem alterar o código, depois disso terá que modificar)

O código foi feito para funcionar com sete imagens, mas você pode aumentar a quantidade no Array

Se não entender muito bem, posta aí !

marvi · Novembro 7, 2008

já encontrei um problema... a cor muda quando passa o mouse, mas fica fixa a cor em vez de voltar a cor original... e antes mudava a cor e voltava para a cor original e só fixava era ao clicar...

Jonathan Queiroz · Novembro 7, 2008

Pequeno erro...

Faz isso 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) {
        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 = imagens2[numero]
        }
}

</script>
</head>
<body>
<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>

A modificação foi essa: Antes estava assim:

if (click[numero]==false) {
            x = document.getElementById(id)
            x.src = imagens2[numero]
        }

Mas o certo é:

if (clique[numero]==false) {
            x = document.getElementById(id)
            x.src = imagens2[numero]
        }

Espero ter ajudado

Qualquer coisa, é só postar !

marvi · Novembro 7, 2008

continua a mesma coisa... ao passar o mouse ele fica vermelho e não volta para azul...

<script type="text/javascript">
var clique = new Array(false, false, false, false, false, false, false)

var imagens = new Array("img/apresentacao_vm.jpg", "apresentacao2.jpg", "apresentacao3.jpg",
"apresentacao4.jpg", "apresentacao5.jpg", "apresentacao6.jpg", "apresentacao7.jpg")

var imagens2 = new Array("img/apresentacao.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) {
        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 = imagens2[numero]
        }
}

</script>


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%" id="AutoNumber2" height="1">
  <tr>
    <td  width="14%" height="1" >
    
    
<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>

Na variavel imagens fica os azuis e na imagens2 fica os vermelhos o qual aparece ao passar do mouse, isso?

Editado Novembro 7, 2008 por marvi

Jonathan Queiroz · Novembro 8, 2008

Agora que fui ver...

Outro erro !

Como é ruim fazer o código sem testar ^^

Ele estava tomando como base sempre o array "imagem2"

Ao invés de:

function mouseOut(id) {
        numero = eval(id.replace("imagem", "")-1)
        if (clique[numero]==false) {
            x = document.getElementById(id)
            x.src = imagens2[numero]
        }
}

Utilize:

function mouseOut(id) {
        numero = eval(id.replace("imagem", "")-1)
        if (clique[numero]==false) {
            x = document.getElementById(id)
            x.src = imagens[numero]
        }
}

Se funcionar, posta aí !

marvi · Novembro 8, 2008

há ta... mas passo o mouse em " apresentação " o azul fica em vermelho e depois fica em azul, certo... ao clicar também em 'apresentação" ele fica vermelho fixo...

Mas, quando vou clicar fixo em "imagens" também ele fica vermelho fixo como deve ser, já que foi clicado e não passou só o mouse...

Contudo o botão 'apresentação" fica com vermelho ainda...em vez de voltar para azul já que estou clicando agora em "imagens" entende?

há, aproveitando... se eu for criar o 3 link:

<a href="java script:selTab('tab1')" onMouseOver="mouseOver('imagem2')" onMouseOut="mouseOut('imagem2')"

onClick="mouseClick('imagem2')">

</a>

Terei que colocar imagem3? e colocar imagem3 no array tambem?

Editado Novembro 8, 2008 por marvi

Jonathan Queiroz · Novembro 8, 2008

Entendi o seu problema...

Faz isso então

<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) {
        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
}
function mouseOut(id) {
        for (i=0;i<imagens.lenght;i++) {
            // Zera o array para salvar o novo valor que foi clicado
            clique[i] = false
        }
        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]
        }
}

</script>
</head>
<body>
<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>

É porque não havia zerado o array "clique" Respondendo a outra pergunta...

Terei que colocar imagem3? e colocar imagem3 no array tambem?

No array, você apenas muda o link da imagem e terá que mudar tudo para "imagem3" Exemplo:

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

marvi · Novembro 8, 2008

Oxi, não mudou nada....

function mouseOver(id) {
        numero = eval(id.replace("imagem", "")-1)
        x = document.getElementById(id)
        x.src = imagens2[numero]
}
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
}
function mouseOut(id) {
        for (i=0;i<imagens.lenght;i++) {
            // Zera o array para salvar o novo valor que foi clicado
            clique[i] = false
        }
        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]
        }
}

</script>

Jonathan Queiroz · Novembro 8, 2008

Desculpa aí !

Coloquei o código no lugar errado, era pra estar na função de clique do mouse

Também tinha outro erro básico, tava estrito "lenght", mas o certo é "length"

Segue código abaixo:

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

</script>
</head>
<body>
<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>

Se funcionar, posta aí

marvi · Novembro 8, 2008

Também tinha percebido isso, mas o array está zerando todos... ou seja, se clico em um botão ele fica vermelho e quando tira o clique ele fica azul... mas o certo é ficar vermelho e só ficar azul quando outro botão do lado for clicado para ficar vermelho também, entendeu?

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

// Zera o array para salvar o novo valor que foi clicado

clique = false

}

marvi · Novembro 8, 2008

Pessoal, estava tendando essa condição

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
         }   
}

Mas não está ok... o que deve ser? Quero que ao clicar um botão 1, por exemplo, o 1 fique vermelho, se eu clicar o botão 2 o botão 2 fica vermelho e o 1 volta ficar azul... Se quiser, segue todo o codigo que ainda não está bom:

<script type="text/javascript">
var clique = new Array(false, false, false, false, false, false, false)

var imagens = new Array("img/apresentacao_vm.jpg", "img/imagens.jpg", "img/plantas.jpg",
"img/ilustracoes.jpg", "img/videos.jpg", "img/imagens_vm.jpg", "apresentacao7.jpg")

var imagens2 = new Array("img/apresentacao.jpg", "img/imagens_vm.jpg", "img/plantas_az.jpg", "img/ilustracoes_az.jpg",
"img/videos_az.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) {
        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
         }   
}
  

}
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]
        }
          
}

</script>


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%" id="AutoNumber2" height="1">
  <tr>
    <td  width="14%" height="1" >
    
    
<a href="java script:selTab('tab')"   onMouseOver="mouseOver('imagem1')" onMouseOut="mouseOut('imagem1')" onClick="mouseClick('imagem1')">
                <img border="0" src="img/apresentacao_vm.jpg" name="imagem1" id="imagem1"></a></td>

Editado Novembro 8, 2008 por marvi

marvi · Novembro 8, 2008

Para ver o problema na prática vejam esse link: http://www.ideiabiz.com/s.htm

Entrar

mudar de cor / figura ao passar o mouse

Pergunta

Link para o comentário

Compartilhar em outros sites

40 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns