[Resolvido] Mudar de imagem ao passar o mouse em cima

[andrewcragy 0]

Olá pessoal, já procurei de tudo na net, mais nunca achei, estou tentando achar um script que ao deixar o mouse em cima, ele mude da imagem principal, para mais 5 imagens extras e quando terminar voltar a aparecer novamente as 6 imagens (1 principal e outras 5 extra).

 

Já procurei bastante na net, mais só acho que pegue 2 imagens (1 principal e outra extra).

Se alguém souber ou tiver o código ai pronto, ficarei agradecido =)

[AndreRO 0]

Cara isso você não vai fazer em php..

 

Dá uma olhada nos eventos onmouseover e onmouseout do javascript e no pseudo-elemento :hover do css

 

 

Como as imagens não voltam ao normal (ou seja, depois passa a aparecer todas as imagens) aconselho a fazer uma class, setar o display pra none no css, e quando passar o mouse em cima, muda o .style.display pra block ou inline

[Matias Rezende 50]

Como o amigo disse, com PHP não tem jeito. No seu caso, só com Javascript (talvez). Vou mover para o fórum correto.

 

Tópico Movido

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript

[andrewcragy 0]

 

Cara isso você não vai fazer em php..

 

Dá uma olhada nos eventos onmouseover e onmouseout do javascript e no pseudo-elemento :hover do css

 

 

Como as imagens não voltam ao normal (ou seja, depois passa a aparecer todas as imagens) aconselho a fazer uma class, setar o display pra none no css, e quando passar o mouse em cima, muda o .style.display pra block ou inline

 

Pois é amigão, eu entrei aqui pra ver se alguém já tinha algo pronto, eu não saco nada de java e nem css, mais valeu mesmo assim por me ajudar.

 

Vou procurar novamente na internet =)

 

Thx

[iRCC 0]

Primeiro você deve pegar o elemento imagem para depois mudar o seu src.

 

Procure aqui no fórum que você vai achar um exemplo que eu mesmo coloquei aqui a algum tempo.

 

Ok? qualquer coisa pergunte denovo.

[andrewcragy 0]

Primeiro você deve pegar o elemento imagem para depois mudar o seu src.

 

Procure aqui no fórum que você vai achar um exemplo que eu mesmo coloquei aqui a algum tempo.

 

Ok? qualquer coisa pergunte denovo.

 

Tentei procurar em seus posts, mais é muita página pra ver..

 

Poderia postar pra mim aqui?

 

Desculpa o incomodo =)

[iRCC 0]

function icone(img){
  //debugger;


 
  	 veiculos = img.value;    //valor do ícone que tinha antes
  	 imagem = document.getElementById("carrinho"); //meu elemento imagem
  	 imagem.src = "images/carro2.png";
}

<img id="carrinho" src="images/carro1.png" onmouseover="icone(this)" />

Seria mais ou menos isso cara, não tenho certeza se isso vai funcionar pq fiz de cabeça agora mas seria essa a idéia.

[andrewcragy 0]

function icone(img){
 //debugger;


 
 veiculos = img.value; //valor do ícone que tinha antes
 imagem = document.getElementById("carrinho"); //meu elemento imagem
 imagem.src = "images/carro2.png";
}

<img id="carrinho" src="images/carro1.png" onmouseover="icone(this)" />

Seria mais ou menos isso cara, não tenho certeza se isso vai funcionar pq fiz de cabeça agora mas seria essa a idéia.

 

Não ta funcionando nada aqui :S

Mais pelo que vi só funciona a imagem principal e uma imagem extra, esse código eu já tenho, mais o que eu queria conseguir era de passar várias imagens (5 extras fora a principal).

 

Obrigado mesmo assim!

[William Bruno 1501]

você quer é um slideshow ?

dê uma olhada nesses:

 

http://forum.imasters.com.br/index.php?/topic/384533-slideshow-com-pequeno-bug/

 

http://forum.imasters.com.br/index.php?/topic/270079-indice-dos-scripts/

[andrewcragy 0]

você quer é um slideshow ?

dê uma olhada nesses:

 

http://forum.imaster...om-pequeno-bug/

 

http://forum.imaster...ce-dos-scripts/

 

Cara, seria mais ou menos igual ao seu slide show, porém o que eu queria era passar o mouse em cima de uma imagem, e começar a mudar, e depois que tirar o mouse de cima, ela parasse e voltasse pra imagem principal, eu não faço a minima ideia de como fazer isso nesse slide show, mais era isso mesmo que estava querendo mesmo!

 

Se conseguir fazer isso, ficarei grato!

 

Abraço!

 

UP, sem resolução ainda :S

[klonder 14]

Que tal criar um gif animado e deixá-lo como a segunda imagem?

 

Se não servir essa opção, você deverá apenas criar um setTimeout para ir chamando outra função e chamando as outras imagens (durante o mouseover).

 

No mouseout, você chama outra função, que irá parar o setTimeout e deixar apenas a imagem pré-definida.

 

Mostre-nos o que você já fez... ou já tentou fazer, porque postar código pronto é meio canseira, entende? O trampo aqui está apertado...

[andrewcragy 0]

Que tal criar um gif animado e deixá-lo como a segunda imagem?

 

Se não servir essa opção, você deverá apenas criar um setTimeout para ir chamando outra função e chamando as outras imagens (durante o mouseover).

 

No mouseout, você chama outra função, que irá parar o setTimeout e deixar apenas a imagem pré-definida.

 

Mostre-nos o que você já fez... ou já tentou fazer, porque postar código pronto é meio canseira, entende? O trampo aqui está apertado...

 

Eu achei isso ai na net, eh exatamente o que estava procurando, porque dai posso criar o evento onmouseover e onmouseout, a duvida vem agora, são diversas imagens contendo essa função de imagens rotativas ao passar o mouse, ai tava vendo como iria fazer porque todas as imagens sairiam do BD (todos os caminhos das imagens tao numa tabela).

 

Esse é o problema, porque nao é apenas uma imagem que vai ter essa função são muitas, ai não sei como fazer, tem alguma ideia, eu não saco de JavaScript, mais se poder ajudar-me, grato irei ficar!

 

<html> 

<script>

 	var proximaNoticia = 0;
 	//o array onde ficam as notícias
 	var arrNoticias = new Array();
 	arrNoticias[0] = "Primeira notícia";
 	arrNoticias[1] = "Segunda notícia, maior";
 	arrNoticias[2] = "Esta é a terceira";
 	arrNoticias[3] = "E por último, mas não menos importante...";
 	
function mudaNoticia()
{
 	//é aqui que o conteúdo da div é trocado pelo conteúdo do array
 	document.getElementById('divNoticias').innerHTML = arrNoticias[proximaNoticia];

 	//um if para saber qual a próxima notícia
 	if (proximaNoticia == arrNoticias.length-1)
 	{
 	proximaNoticia = 0;
 	}
 	else
 	{
 	proximaNoticia++;
 	}
}

//faz executar a função mudaNoticia a cada 3 segundo (3000 milesimos de segundo)
window.setInterval(mudaNoticia, 3000);

</script>
<body onload="mudaNoticia()">

 	<div id="divNoticias"></div>
 	
</body></html>

UP, sem resolução ainda :S

[andrewcragy 0]

Não consegui editar o titulo do tópico, mais felizmente consegui a resolução :) :)