Ir para conteúdo

POWERED BY:

Arquivado

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

brunomosciatti

[Resolvido] Como colocar Imgs aleatórias.

Por , em Javascript

Recommended Posts

brunomosciatti    0

brunomosciatti
Postado

Fala galera...

Bom, to com uma dúvida.. como colocar imagens aleatórias em um site..

 

Na verdade eu tenho um x numeros de topos diferentes e presciso que a cada F5 - atualização da página - esse topo troque..

Exemplo:

 

Abri o site.. está com o topoX, dei um F5, o topo mudou para topoY, dei outro f5 e foi para o topoZ

 

Acho que deu pra entender..

 

Ah.. não sei como funciona, penso que seja javascript.. mais presciso de um jeito mais simples possivel, que envolva sómente HTML/CSS.

 

Abraços e obrigado desde ja.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Olha, o melhor seria com progração server-side (PHP, ASP...).

 

HTML/CSS como dito, não dá. Mas um esquema simples, por JavaScript seria mais ou menos assim (dou as linhas gerais, daí você pega a vara e pesca o próprio peixe).

 

Você armazena numa matriz todos os endereços das imagens. Daí faz um "sorteio" para pegar um índice aleatório dessa matriz.

 

Eu não sei como faz essa aleatoriedade em JavaScript, mas você pode usar as funções do PHP que foram portabilizadas para JavaScript array_rand() e suffle(), pelo projeto PHP.JS.

 

Logo após o carregamento (onload) da página você pega uma tag IMG que seria seu topo e troca o SRC para esse valor obtido.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim, existe como sim.

siga os passos:

 

-> criar um array JS com as imagens

-> jogar no elemento que você quer, alguma posição desse vetor, sorteada.

<html>
<head>
<style type="text/css">
#topo {
	width: 1024px;
	height: 768px;
}
</style>
<script type="text/javascript">
	img1 = new Image();
	img1.src = 'http://gc.kombo.com/images/content/misc/wallpaper_zelda-1024.jpg';
 
	img2 = new Image();
	img2.src = 'http://4.bp.blogspot.com/_ExDgvzINYTU/R1SYjRsg5UI/AAAAAAAAAIw/8ocPT009Y2U/s1600-R/zelda.jpg';
 
	img3 = new Image();
	img3.src = 'http://www.nintendoheaven.com/images/nintendo-wallpaper/Zelda%20link%20nintendo%20-%20Wallpaper.jpg';
	
	
window.onload = function(){
	var bg = new Array();
	bg[0] = 'http://gc.kombo.com/images/content/misc/wallpaper_zelda-1024.jpg';
	bg[1] = 'http://4.bp.blogspot.com/_ExDgvzINYTU/R1SYjRsg5UI/AAAAAAAAAIw/8ocPT009Y2U/s1600-R/zelda.jpg';
	bg[2] = 'http://www.nintendoheaven.com/images/nintendo-wallpaper/Zelda%20link%20nintendo%20-%20Wallpaper.jpg';
	//bg.sort();
	var numero = Math.round( Math.random() * 2 );
	
	//alert( numero );

	document.getElementById('topo').style.background = "url('"+bg[numero]+"')";
}
</script>
</head>
<body>
	<div id="topo">

	</div><!-- /topo -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Testou ao menos o código que eu postei?

 

Se não sabe nada de Javascript, tente estudar ^_^

Procure apostilas e vá lendo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Só substituir no array o caminho para suas imagens.

 

bg[0] = 'http://gc.kombo.com/images/content/misc/wallpaper_zelda-1024.jpg';
bg[1] = 'http://4.bp.blogspot.com/_ExDgvzINYTU/R1SYjRsg5UI/AAAAAAAAAIw/8ocPT009Y2U/s1600-R/zelda.jpg';
bg[2] = 'http://www.nintendoheaven.com/images/nintendo-wallpaper/Zelda%20link%20nintendo%20-%20Wallpaper.jpg';

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tenta assim:

 

JavaScript

window.onload = function(){
	var images = new Array();
	images[0] = 'http://gc.kombo.com/images/content/misc/wallpaper_zelda-1024.jpg';
	images[1] = 'http://4.bp.blogspot.com/_ExDgvzINYTU/R1SYjRsg5UI/AAAAAAAAAIw/8ocPT009Y2U/s1600-R/zelda.jpg';
	images[2] = 'http://www.nintendoheaven.com/images/nintendo-wallpaper/Zelda%20link%20nintendo%20-%20Wallpaper.jpg';
	var sort = Math.round(Math.random() * images.length);
	document.write('<img src="' + images[sort] + '" alt="Imagens do topo" />');
}

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Qual que é a dúvida exatamente amigo?

Te mostrei como fazer trocando o background do elemento.. e até chamei a minha div de topo..

 

oque você não conseguiu fazer?

tentou? como?

deu erro? qual?

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