Link Que Muda Ao Click Do Mouse

[Guest - rafael -]

oi...

gostaria de fazr um menu com 2 links por exemplo....

fiz um com imagens, e eventos mouse over e mouseout....

gostaria que quando eu clicasse em um dos links, ele fikasse estatico, e não mudasse mais ate eu clicar no outro link, isso serviria pra mostrar pro visitante da pagina em que secao ele esta...

seria assim:

normal: normal.gif

over: over.gif

out: out.gif

clicado: over.gif (ate alguém clicar no outro link, ai voltar a ser normal.gif)

sera que da pra fazer??? perguntei semana passada e ninguém conseguiu me responder...

vlw

[Crystian]

Amigo, cria duas classes css... uma clicado e outro normal, e só troca o className conforme o cara vai clicando... Tem noção de JS?

[Guest - rafael -]

tenho poka bem poka....tem como fazer um exemplo pra mim com dois links que eu estudo e consiga fazer o resto sozinhu.....a unica coisa é que tem que ser com imagens....

se der vlw mesmo...

[Guest - guest -]

??

[Crystian]

Bom nesse caso você terá q criar duas imagens, e trabalhar com o onclick delas.

Fazer uma function chamada no onclick q troca os src de todas outras imagens e coloca o src da imagem q é pra ser diferente das outras nessa q você clicou.

Ex.:

 // function
function trocaImagens(img) {
var imgs = document.getElementsByTagName("img");
for (i=0; i < imgs.length; i++) {
if (imgs[i].id.indexOf("menu") != -1) imgs[i].src = 'img2.gif';
if (imgs[i].id == img.id) imgs[i].src = 'img1.gif';
}
}

// nas imagens
<img src="img1.gif" onClick="trocaImagens(this)" id="menu0">
<img src="img1.gif" onClick="trocaImagens(this)" id="menu1">
<img src="img1.gif" onClick="trocaImagens(this)" id="menu2">

Entendeu?... abraço

[Guest - rafael -]

ae, deu certo! mas tem um pequeno probleminha...hehehe

eu to utilizando o evento mouse out, ai se eu uso sem esse evento funciona ok, mas com esse evento, quando eu tiro o mouse de cima, ele volta a 1 figura, o que deveria fikar a 2....

mas vlw ate agora...

sera que não existe uma maneira de o ultimo clicado ignorar o evento mouse out???

vlw!

[Crystian]

tenta verificar o src da imagem se for diferente daquela q você precisa mostrar no onmouse out tu não executa a ação...

[Guest - rafael -]

Amigo, cria duas classes css... uma clicado e outro normal, e só troca o className conforme o cara vai clicando... Tem noção de JS?

como faria isso? to vendo qual fika melhor, se com imagem ou com texto simples, teria como me dar uma ajuda??

vlw!

[Crystian]

tu já tentou fazer isso? tanto com imagem ou com css? Se sim posta o código q dae posso ter uma idéia do q você está fazendo de errado para não funcionar. Se eu te passar o código pronto, ou um exemplo, simplismente você vai pegá-lo, copia-lo(ou altera-lo) e não vai aprender.

[Guest - rafael -]

tipo, a parte do css eu consigo fazer...

<style type="text/css">
a.normal             {color:#000000;
             text-decoration:none;
                          } 
a.normal:hover    {color:#009900;
                            text-decoration:underline;
                           }

a.clicado             {color:#009900;
             text-decoration:underline;
                          } 
</style>

ai teria dois tipos, o link normal, e o link clicado(o ultimo somente)...

o problema é consegur fazer que quando o usuario clicar no link, aquele exato link vai ter class="clicado" e o resto dos links vao ter class="normal"...

se precisar tmb consigo fazer chamar css externo...mas é que é somente uma pagina então eu to deixando dentro do proprio codigo..vlw

[Crystian]

Vou te dar uma idéia, cria uma function q deixa todos os menus(tanto com css como imagem) com a mesma imagem(estilo). Pra isso você vai ter q colocar um identificador em todos os teus menus, ou então criar uma tabela para fazer isso. Depois nessa mesma function você passa um parâmetro com o identificador do menu q deve ficar clicado e faz isso por último.

[Guest - rafael -]

tipo, não abusando muito sabe...mas eu conheco pouco de javascript...

como seria essa funcao? como faria pra chamar ela e tal....porque eu sou meio fraco ainda....sei o basico do basico do basico....

vlw!

[Crystian]

tah, vamos supor q teu menu esteja dentro de uma tabela...

//essa seria mais ou menos a função. O branco e o azul são as duas class

function clica(obj) {

menu = document.getElementById("tabelaMenu").rows[0];

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

menu.cells.className = 'branco';

}

obj.className = 'azul';

}

// Aqui é o menu feito com uma tabela de uma linha e várias colunas

<table id="tabelaMenu">

<tr>

<td onclick="clica(this)">teste</td><td onclick="clica(this)">teste1</td><td onclick="clica(this)">teste2</td>

</tr>

</table>

eu não testei pra ver se funciona, qualquer coisa q você não entender posta q vamos dar uma olhada...

[Guest - rafael -]

Outro dia você tinha me dado um exemplo com imagens...como fikaria para mudar somente por css os atributos de tal link?

//script
function trocaImagens(img) {
var imgs = document.getElementsByTagName("img");
for (i=0; i < imgs.length; i++) {
if (imgs[i].id.indexOf("menu") != -1) imgs[i].src = 'img1.gif';
if (imgs[i].id == img.id) imgs[i].src = 'img2.gif';
}
}


//body
<img src="img1.gif" onClick="trocaImagens(this)" id="menu0">
<img src="img1.gif" onClick="trocaImagens(this)" id="menu1">
<img src="img1.gif" onClick="trocaImagens(this)" id="menu2">

vlw!!!

[Guest - rafael -]

por favor uma ajuda!!

eu não to conseguindo fazer, tenho uma base muito ruim...

vlw

[OSJunior]

por favor uma ajuda!!

eu não to conseguindo fazer, tenho uma base muito ruim...

vlw

Cara...aproveita o id que tem nas tag img e reutiliza elas no css... ou então adiciona um style ou um class...

falou.

[Guest - rafael -]

tipo, eu tenho ate ideia de como fazer, mas não sei fazer, pois não sei quase nada, muito pouco de javascript, css, etc...

não teria como mostrar um codigo bem simples, com dois links, só pra mudar a cor dele quando clicar e fikar ate clicar no proximo, que ai eu já estudo esse codigo e termino ele com os meus links...

vlw ae e desculpa por toda essa enchessao de saco...

falou

[Senshi]

eu num sei direito.. mas eu faria desse jeito:

faria esse evento normalmente q nem você fez...

dai quandu ele fosse na pagina do link.. o respectivo link perderia a propriedade JS e so ia ficar uma imagem... e assim por diante..

mas isso so vai funcionar c a parte do menu atualizar tb!!

a aprte dos menus e um outro frame??

[Guest - rafael -]

na verdade são 3 frames, o menu atualiza o sub-menu e o conteudo....

sera que daria pra fazer algo assim?

se o iframe conteudo for home.htm ou index.htm, o link home sera vermelho e o resto dos links serao pretos....

e assim por diante, sera que da certo??

[Guest - rafael -]

ajuda por favor......estou de sexta passada só pra fazer esse menu...

vlw!