Ir para conteúdo

POWERED BY:

Arquivado

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

Wolv

Alterar uma imagem ao passar o mouse em outra

Por , em Javascript

Recommended Posts

Wolv    0

Wolv
Postado

Olá! Se alguém puder ajudar, gostaria de saber qual o script a ser usado pra fazer o seguinte: temos 3 imagens na página, uma maior no topo, e duas menores sobre o canto inferior direito da imagem maior. Se alguém passa o mouse sobre a segunda das duas imagens menores, a imagem maior muda e se fixa; ela só volta a mudar caso a pessoa passe o mouse sobre a primeira imagem menor, assim a imagem maior volta ao que era anteriormente.Vale salientar que a imagem maior não é um background, e não está contida em uma tabela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jair Humberto    2

Jair Humberto
Postado

Olá Wolv, faça o seguinte:

 

<html><head><title>teste</title></head><body><script language="JavaScript"><!--VARIhover =   (((navigator.appName == "Netscape") &&   (parseInt(navigator.appVersion) >= 3 )) ||   ((navigator.appName == "Microsoft Internet Explorer") &&   (parseInt(navigator.appVersion) >= 4 )));function VARIpreload(img) {  var a=new Image(); a.src=img; return a; }if(VARIhover){  VARInav2n=VARIpreload("Imagem_grande.jpg");  VARInav2h=VARIpreload("Imagem_grande2.jpg");}// --></script><img src="Imagem_grande.jpg" width="300" height="200" border="0" alt="Home" name="VARInav2"></a><br><br><img src="Imagem_pequena.jpg" width="200" height="150" border="0" onmouseover="if(VARIhover) document['VARInav2'].src=VARInav2n.src" style="cursor:hand"><br><br><img src="Imagem_pequena2.jpg" width="200" height="150" border="0" onmouseover="if(VARIhover) document['VARInav2'].src=VARInav2h.src" style="cursor:hand"><br><br></body></html>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wolv    0

Wolv
Postado

Muito obrigado pela ajuda!

 

Mas, e infelizmente há um "mas", não deu certo ainda.

 

Fiz exatamente o que vocês recomendaram, mas a imagem maior não muda pra outra quando passo o cursor sobre as duas imagens.

 

Segue abaixo como ficou o trecho alterado no contexto:

 

<html><head><title>teste</title></head><body><script language="JavaScript"><!--VARIhover =   (((navigator.appName == "Netscape") &&   (parseInt(navigator.appVersion) >= 3 )) ||   ((navigator.appName == "Microsoft Internet Explorer") &&   (parseInt(navigator.appVersion) >= 4 )));function VARIpreload(img) {  var a=new Image(); a.src=img; return a; }if(VARIhover){  VARInav2n=VARIpreload("Imagem_grande.jpg");  VARInav2h=VARIpreload("Imagem_grande2.jpg");}// --></script></p><img src="Imagem_grande.jpg" width="300" height="200" border="0" alt="Home" name="VARInav2"></a></p><div id="Layer1" style="position: absolute; left: 25; top: 370; width: 217; height: 393; z-index: 1">   <table width="100%" border="0" cellspacing="0" cellpadding="0">	<tr>	  <td valign="top">		<!-- LINKS DIVERSOS -->	  </td>	</tr>  </table></div><div id="Layer2" style="position: absolute; left: 265; top: 490; width: 500; height: 113; z-index: 2">   <table width="100%" border="0" cellspacing="0" cellpadding="0">	<tr>	  <td><img src="Imagem_pequena.jpg" onmouseover="if(VARIhover) document ['VARInav2'].src=VARInav2n.src" style="cursor:pointer"></td>	  <td><img src="Imagem_pequena2.jpg" onmouseover="if(VARIhover) document['VARInav2'].src=VARInav2h.src" style="cursor:pointer"></td>	</tr>  </table></div></body></html>

 

Como podem ver as duas imagens pequenas estão inseridas em uma tabela e um div. Não sei se isto prejudica o funcionamento do script.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jair Humberto    2

Jair Humberto
Postado

Ué, :huh: , aqui rodou de boa tambémtalvez seu browser nao esteja atualizado, verifique as tags separadas por quebra de linha, sei la, aqui copiei o seu codigo e funcionou normalzinho.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wolv    0

Wolv
Postado

Resolvido o problema, pessoal.Foi um erro bobo da minha parte. O Internet Explorer estava bloqueando os scripts da página, por isto não estava funcionando. Como eu só estava fechando a barrinha de advertência do navegador (uso a versão 6.0 por aqui), ao invés de escolher a opção "Permitir Conteúdo Bloqueado", o recurso não funcionava.Portanto, fica aqui a dica pra quem for testar o recurso no PC caso esteja com a opção de bloquear conteúdo do Internet Explorer 6.0 ativada.Desculpem pela confusão. E mais uma vez, muito obrigado pela ajuda! Será muito útil!

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