Ir para conteúdo

POWERED BY:

Arquivado

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

gjrdesign

Função mouseover e mouseout

Por , em Javascript

Recommended Posts

gjrdesign    0

gjrdesign
Postado

Olá. Sou designer gráfico e iniciante em web. Estou reformulando meu site e não acerto fazer a mudança das miniaturas de trabalhos recentes em preto e branco pra colorido em todas as imagens. Cada miniatura será linkada pra uma parte diferente. Acerto fazer isso só em uma mas quando tento aplicar nas 5 imagens não dá certo. Acredito que seja algo no código inserido no header, vejam como está: imagetica.net/index_4

 

Assim está o javascript no HEAD

 

<head>

 

<script language="Javascript">

function lightUp()

{

document.images["trab1"].src="Layer-11_cor.png"; document.images["trab2"].src="Layer-10_cor.png"

}

function dimDown()

{

document.images["trab1"].src="Layer-11.png"; document.images["trab2"].src="Layer-10.png"

}

</script>

 

</head>

 

Acho que o problema está em eu não saber inserir os valores ou dados pra outras imagens.

 

Assim está inserido no BODY

<div id="Layer-11" ><a href="/portfolio_iv" onmouseOver="lightUp();" onmouseOut="dimDown();">

<img src="Layer-11.png" name="trab1" width=70 height=70 border=0> </a></div>

 

<!-- This is 'trab2' -->

<div id="Layer-10" ><a href="/portfolio_iv" onmouseOver="lightUp();" onmouseOut="dimDown();">

<img src="Layer-10.png" name="trab2" width=70 height=70 border=0> </a></div>

 

O rimeiro funciona bem mas interfere no segundo, os demais ainda não modifiquei o original pra tb terem a função de mouseover.

 

<!-- This is 'trab3' -->

<div id="Layer-9" > <img src="Layer-9.png" width="70" height="70" alt="trab3" /></div>

 

<!-- This is 'trab4' -->

<div id="Layer-8" > <img src="Layer-8.png" width="70" height="70" alt="trab4" /></div>

 

<!-- This is 'trab6' -->

<div id="Layer-7" > <img src="Layer-7.png" width="70" height="70" alt="trab6" /></div>

 

Qualquer ajuda será muito bem vinda pra um iniciante como eu! Obrigado antecipadamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André D. Molin    15

André D. Molin
Postado

Cara, muito código para um coisa tão simples.

Da pra simplificar bastante.

Olha um exemplo.

 

<img src="menudireita1.png" name="menudireita" onmouseover="document.menudireita.src='menudireita2.png'" onmouseout="document.menudireita.src='menudireita1.png'" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

do jeito que você fez teria que fazer uma função para cada foto, mas não precisa.. segue exemplo..

 

<script language="Javascript">

function lightUp(id,img)
{

	document.getElementById(id).src = img;
} 

function dimDown(id,img)
{
	document.getElementById(id).src = img;

}


</script>
<div id="Layer-11" >
	<a href="/portfolio_iv" onmouseOver="lightUp('trab1','Layer-11_cor.png');" onmouseOut="dimDown('trab1','Layer-11.png');">
		<img src="Layer-11.png" id="trab1" name="trab1" width=70 height=70 border=0 /> 
	</a>
</div>

ai nos demais você coloca o id da img e o caminho..

 

t+

Compartilhar este post

Link para o post
Compartilhar em outros sites

gjrdesign    0

gjrdesign
Postado

ODalZin e Otata obrigado pela supervelocidade em que responderam e tiraram minha dúvida. Pois é, a solução é simples mas o aprendiz é complicado (eu! srsr). Ainda tenho muito tempo pela frente pra saber pelo menos a metade do que sei na área gráfica.

 

ODalZin, optei primeiro pela tua solução, ainda vou testar do Otata. Só que na solução do ODalZin a imagem demora um pouco pra aprecer mudada (de preto e branco pra colorido) e não é automática. Dá pra arrumar isso?

 

OBS: Fiz o teste no FF3 e ficou meio segundo mais lento. No Chrome ficou automática a mudança e no IE7 nem aparece, assim como a galeria!

 

Vejam: imagetica.index_4

Compartilhar este post

Link para o post
Compartilhar em outros sites

André D. Molin    15

André D. Molin
Postado

Só que na solução do ODalZin a imagem demora um pouco pra aprecer mudada (de preto e branco pra colorido) e não é automática. Dá pra arrumar isso?

Isso é facil de arrumar.

Basta fazer um onLoad na tag <body> do documento, fazendo o javascript pré-carregar as imagens que você determinar.

Assim, vai ficar automatico, porque as imagens já vão estar pré-carregadas.

 

Sobre o IE7, vou verificar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gjrdesign    0

gjrdesign
Postado

Seria pedir demais se você escrevesse o código como ficaria no head e no body e colocasse aqui? Incluindo essa função onLoad? Não acertei fazer...

 

Interessante, à medida que teclava essa resposta a mudança das imagens no FF3 ficou automática, sem aquela demora... eu hein...

 

Só resta o problema do IE7 q não aparece nada, mas esse problema nem no fórum da Dynamic Drive, onde peguei a galeria SimpleGallery achei...

 

Bem, acabei mesmo adotando o efeito de função do Otata, acabei entendendo melhor, mas o atraso no aparecimento das imagens persiste mas depois fica normal (acho q por causa da memória cache). Mas ODalZin se você acha q sua solução é melhor posso tentar entender mais um pouco. de qualquer muito obrigado aos dois pela ajuda! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

André D. Molin    15

André D. Molin
Postado

Seria pedir demais se você escrevesse o código como ficaria no head e no body e colocasse aqui? Incluindo essa função onLoad? Não acertei fazer...

Para falar a verdade eu tambem nao sei =/

Eu sei que é assim que funciona, usando onLoad e etc, mas como eu nunca usei em site meu então não tenho um código feito aqui.

S

 

Vou te falar uma coisa. Eu gosto de ficar olhando as duvidas do pessoal, porque aí eu vou google e pesquiso soluções e dicas. E com isso acabo aprendendo tambem. Eu aprendo e ainda ajudo o proximo.

Varias de minhas mensagens no iMaster foram respondidas depois de dar uma pesquisada.

 

Então desculpa, eu iria ver sobre o onload na boa, só que ta ficando tarde, e to indo dormir.

Abraços

 

Interessante, à medida que teclava essa resposta a mudança das imagens no FF3 ficou automática, sem aquela demora... eu hein...

As imagens foram salvas no cache do navegador :D

 

Bem, acabei mesmo adotando o efeito de função do Otata, acabei entendendo melhor, mas o atraso no aparecimento das imagens persiste mas depois fica normal (acho q por causa da memória cache). Mas ODalZin se você acha q sua solução é melhor posso tentar entender mais um pouco. de qualquer muito obrigado aos dois pela ajuda!

Que isso, sem problemas.

Postei aquele exemplo lá pra ficar melhor pra ti.

Nem esquento em nao usar.

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