Como utilizar do evento onmouseover em imagem com condição?[Respondida 09/05/2012 ][Resolvido]

9 de maio de 2012 7 respostas

Andr_de_Souza_Vieira 9 de maio de 2012

Bom Tarde Galera! Meu código abaixo está com algum erro e não sei qual é... A minha ideia seria o usuário posicionar o cursor do mouse na figura e mostrar uma mensagem para campo... O código está ai:

<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<title> Exer numero 9 - Javascript </title>
	<script>
		function exibeVetores(id)
		{
			var nomeSites = new Array();
			nomeSites[0] = "www.google.com.br";
			nomeSites[1] = "www.yahoo.com.br";
			nomeSites[2] = "www.cade.com.br";
			nomeSites[3] = "www.gmail.com.br";
			nomeSites[4] = "www.facebook.com.br";
			if(id==1)
			{
	        document.getElementById('saida').value = nomeSites[0];
			
			}
			else if ( id==2)
			{
			document.getElementById('saida').value = nomeSites[1]);
			
			}
			else if ( id==3)
			{
			document.getElementById('saida').value = nomeSites[2]);
			
			}
			else if ( id==4)
			{
			document.getElementById('saida').value = nomeSites[3]);
			
			}
			else if ( id==5)
			{
			document.getElementById('saida').value = nomeSites[4]);
			
			}
			  
		}
		
		
		
	</script>
</head>
<body>
	<center>
	<img src="Imagens/1.jpg" onMouseOver="exibeVetores(1)"/>
	<img src="Imagens/2.jpg" onMouseOver="exibeVetores(2)"/> 
	<img src="Imagens/3.jpg" onMouseOver="exibeVetores(3)"/> 
	<img src="Imagens/4.jpg" onMouseOver="exibeVetores(4)" /> 
	<img src="Imagens/5.jpg" onMouseOver="exibeVetores(5)" />
	</br>
	<input type="text" id="saida" size="50">
	</center>
	
</body>
</html>

Poderia vocês acharem o erro ou dar uma solução alternativa?

Muito Obrigado, att André Vieira

7 Respostas

CharlesAlves 9 de mai. de 2012

Tira estes parenteses que tu colocou antes do ponto e virgula (

pcsi 9 de mai. de 2012

Não se esqueça de que as arrays começam do 0. Segue o código, só copiar e colar amigão!

e o dos links corrigidos

<center> <img src="Imagens/1.jpg" onMouseOver="exibeVetores(0)"/> <img src="Imagens/2.jpg" onMouseOver="exibeVetores(1)"/> <img src="Imagens/3.jpg" onMouseOver="exibeVetores(2)"/> <img src="Imagens/4.jpg" onMouseOver="exibeVetores(3)" /> <img src="Imagens/5.jpg" onMouseOver="exibeVetores(4)" /> <br /> <input type="text" id="saida" size="50"> </center>

Espero ter ajudado.

Abraço!

CharlesAlves 9 de mai. de 2012

Olha caso queira fazer isto somente com javascript poderia fazer assim

<body>
	<script>
		var nomeSites = [ "www.google.com.br", "www.yahoo.com.br",
				"www.cade.com.br", "www.gmail.com.br", "www.facebook.com.br" ];

		window.onload = initPage;

		function initPage() {
			var imagens = document.getElementsByTagName("img");
			for ( var i = 0; i < nomeSites.length; i++) {
				imagens[i].onmouseover = mensagem;
			}
		}

		function mensagem(e) {
			var imagem = getActivatedObject(e);
			document.getElementById("saida").value = nomeSites[parseInt(imagem.id)-1];
		}

		function getActivatedObject(e) {
			var obj;
			if (!e) {
				// early version of IE
				obj = window.event.srcElement;
			} else if (e.srcElement) {
				// IE 7 or later
				obj = e.srcElement;
			} else {
				// DOM Level 2 browser
				obj = e.target;
			}
			return obj;
		}
	</script>
	<center>
		<img src="Imagens/1.jpg" id="1" /> <img src="Imagens/2.jpg" id="2" />
		<img src="Imagens/3.jpg" id="3" /> <img src="Imagens/4.jpg" id="4" />
		<img src="Imagens/5.jpg" id="5" /> </br> <input type="text" id="saida"
			size="50">
	</center>

</body>

Andr_de_Souza_Vieira 9 de mai. de 2012

pcsi:
Não se esqueça de que as arrays começam do 0. Segue o código, só copiar e colar amigão!

<script> function exibeVetores(id) { var nomeSites = new Array(); nomeSites[0] = "www.google.com.br"; nomeSites[1] = "www.yahoo.com.br"; nomeSites[2] = "www.cade.com.br"; nomeSites[3] = "www.gmail.com.br"; nomeSites[4] = "www.facebook.com.br"; if(id==0) { document.getElementById('saida').value = nomeSites[0]; } else if(id==1) { document.getElementById('saida').value = nomeSites[1]; } else if(id==2) { document.getElementById('saida').value = nomeSites[2]; } else if(id==3) { document.getElementById('saida').value = nomeSites[3]; } else if(id==4) { document.getElementById('saida').value = nomeSites[4]; } } </script>

e o dos links corrigidos

<center> <img src="Imagens/1.jpg" onMouseOver="exibeVetores(0)"/> <img src="Imagens/2.jpg" onMouseOver="exibeVetores(1)"/> <img src="Imagens/3.jpg" onMouseOver="exibeVetores(2)"/> <img src="Imagens/4.jpg" onMouseOver="exibeVetores(3)" /> <img src="Imagens/5.jpg" onMouseOver="exibeVetores(4)" /> <br /> <input type="text" id="saida" size="50"> </center>

Espero ter ajudado.

Abraço!

Nossa Galera, que erro juvenil…, valeu mesmo, demorei para achar esses parentes, aliás vocês acharam…
Novamente muito Obrigado Charles e Pcsi…
Abraços!

pcsi 10 de mai. de 2012

Sempre que precisar é só contar com a gente amigão.

Abraço

ps.: muda o título do tópico para RESOLVIDO.

Andr_de_Souza_Vieira 10 de mai. de 2012

pcsi:
Sempre que precisar é só contar com a gente amigão.

Abraço

ps.: muda o título do tópico para RESOLVIDO.

Então, sou novo aqui e não sei como realiza isso, pode me explicar isso?
Tanto que renomeei a questão para resolvida 09/05/2012…

pcsi 10 de mai. de 2012

É só clicar no botão “edit” ao lado do primeiro post.

Daí ao início da frase você coloca lá um:
[RESOLVIDO]

abraço!

Criado 9 de maio de 2012

Ultima resposta 10 de mai. de 2012

Respostas 7

Participantes 3

7 Respostas

Topicos relacionados