Publicado em 8 de abr.

Alternar páginas HTML ao carregar

Olá pessoal

Tenho uma página html e gostaria de alternar a cada carregamento do internauta. Sei que é uma coisa bem simples, mas garimpei e só achei para alternar imagens... agora páginas não.

Ex.: Tenho um index1.html, index2.html, index3.html e quando carregar o www.nomedosite.com.br, o sistema escolhe qual quer aparecer. Quando eu der F5, ele aparece outro.... e assim por diante.

Obrigado turma e fico no aguardo.

Discussão (14)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Valdeir Info· 9 de abr.

<html>
<body>

<p id="demo">Click the button to display a random number.</p>

<button onclick="myFunction()">Try it</button>

<script type="text/javascript">
function myFunction()

{

var paginas = new Array("index1.html", "index2.html", "index3.html");
posicaoArray=Math.floor(Math.random() * paginas.length);

//Pode usar assim
window.location.href=paginas[posicaoArray];

//ou com jQuery

$("div").load(paginas[posicaoArray]);

}
</script>

</body>
</html>

angelorubin· 9 de abr.

Bom dia,

Acho que isso resolve.

JavaScript

<script type="text/javascript">

var paginas = ["index.html","01.html","02.html","03.html"]

var pagRand = paginas[Math.floor(Math.random()*paginas.length)]

window.location = pagRand;

</script>

Binhofa· 15 de abr.

Que maravilha! Obrigado pela ajuda de vocês pessoal.

Gostaria de ter a ousadia de pedir mais uma contribuição: Usando esses códigos trocando o HTML por imagens PNG (A.png e B.png), quando vou teclando F5, a imagem A.png fica sobre B.png, ficando visivelmente exposto atrás dela a outra imagem. QUal é a forma quando for aparecer a imagem A, ela "limpar" o conteúdo todo B e só aparecer uma apenas?

Ex.: Usando o código do angelorubin

_________________________________________________________________

<script type="text/javascript">

 var paginas = ["a.png","b.png"]

 var pagRand = paginas[Math.floor(Math.random()*paginas.length)]

 window.location = pagRand;

</script>

_________________________________________________________________

Detalhe: As imagens estão em PNG com fundo transparente, pois o fundo de tela tem que "casar" com as duas imagens.

Não sei se fui claro, mas qualquer coisa explicarei mais detalhadamente.

Obrigado mais uma vez, pessoal.

Tato..· 19 de abr.

>
Que maravilha! Obrigado pela ajuda de vocês pessoal.

Ex.: Usando o código do angelorubin

_________________________________________________________________

<script type="text/javascript">

 var paginas = ["a.png","b.png"]

 var pagRand = paginas[Math.floor(Math.random()*paginas.length)]

 window.location = pagRand;

</script>

_________________________________________________________________

Detalhe: As imagens estão em PNG com fundo transparente, pois o fundo de tela tem que "casar" com as duas imagens.

Não sei se fui claro, mas qualquer coisa explicarei mais detalhadamente.

Obrigado mais uma vez, pessoal.

bom, você pode usar um hide vou tentar fazer um exemplo meio por cima.

<script type="text/javascript">
 $(document).ready(function(){
 $("#id_da_img").hide();
 $("#id_da_img1").hide();
 $("#id_da_img2").hide();
 $("#id_da_img3").hide();
 })
 var img = ["#id_da_img","#id_da_img1","#id_da_img2","#id_da_img3"]

 var imgRand = img[Math.floor(Math.random()*img.length)]

 $(imgRand).show;

</script>

Lembrando que pra isso você precisa ter o jQuery na sua página. Bom, não testei o código, mas uma coisa mais ou menos assim deve funcionar.

Binhofa· 21 de abr.

Tato, obrigado pela ajuda, mas não consegui executar os procedimentos acima. O que pode estar errado?

Obrigado e fico no aguardo!

Tato..· 25 de abr.

>
Tato, obrigado pela ajuda, mas não consegui executar os procedimentos acima. O que pode estar errado?

Obrigado e fico no aguardo!

E qual erro está dando?

Binhofa· 25 de abr.

Olá Tato

Ele simplesmente não apaga. Fiz o seguinte procedimento:

<script type="text/javascript">

 $(document).ready(function(){

 $("#img.jpg").hide();

 $("#img1.jpg").hide();

 $("#img2.jpg").hide();

 $("#img3.jpg").hide();

 })

 var img = ["#img.jpg","#img1.jpg","#img2.jpg","#img3.jpg"]

 

 var imgRand = img[Math.floor(Math.random()*img.length)]

 

 $(imgRand).show;

 

</script>

 

 

O que estou fzendo de errado? Não consegui entender também o que voce disse sobre o Jquery. Tenho que executar alguma função antes do </HEAD>.

Obrigado mais uma vez e fico no aguardo.

Tato..· 25 de abr.

>
Olá Tato

Ele simplesmente não apaga. Fiz o seguinte procedimento:

<script type="text/javascript">

 $(document).ready(function(){

 $("#img.jpg").hide();

 $("#img1.jpg").hide();

 $("#img2.jpg").hide();

 $("#img3.jpg").hide();

 })

 var img = ["#img.jpg","#img1.jpg","#img2.jpg","#img3.jpg"]

 

 var imgRand = img[Math.floor(Math.random()*img.length)]

 

 $(imgRand).show;

 

</script>

 

 

O que estou fzendo de errado? Não consegui entender também o que voce disse sobre o Jquery. Tenho que executar alguma função antes do </HEAD>.

Obrigado mais uma vez e fico no aguardo.

Você substituiu os "img.jpg" pelo nome das suas imagens?

Binhofa· 25 de abr.

é... pela sua resposta, acho que fiz besteira...rsss!

Fiz isso sim. Os meus arquivos na verdade são em PNG (img1.png, img2.png, img3.png.......)

Tato..· 25 de abr.

>
é... pela sua resposta, acho que fiz besteira...rsss!

Fiz isso sim. Os meus arquivos na verdade são em PNG (img1.png, img2.png, img3.png.......)

kkkkkkkkkkk..

depois de nomear certinho, correu tudo bem? hehehe

ou nao deu ainda? ^^

Binhofa· 25 de abr.

Não Tato, nao deu! Tem que habilitar alguma coisa antes da tag </head>? Nao consegui entender sobre esse Jquery que comentou.

Tato..· 25 de abr.

bom, o "#img.jpg" se refere ao ID da imagem o "#" se refere ao ID se foce um "." seria referido a uma classe.

por exemplo

<script type="text/javascript">
$(document).ready(function(){
$("#img").hide();
$("#img1").hide();
$("#img2").hide();
$("#img3").hide();
})
var img = ["#img","#img1","#img2","#img3"]

var imgRand = img[Math.floor(Math.random()*img.length)]

$(imgRand).show;

</script>
<img id="img" scr="imagem.png">
<img id="img1" scr="imagem1.png">
<img id="img2" scr="imagem2.png">
<img id="img3" scr="imagem3.png">

o comando estaria chamando ele..

O que eu tentei te dizer é assim..

Faça uma lista. o que vai acontecer é o seguinte

Quando o documento abrir, primeiro ele vai esconder todas elas, depois vai sortear uma aleatória, e por ultimo mostrar a aleatória.. entendeu?

Binhofa· 3 de mai.

Ok, vou executar esses procedimentos e qualquer novidade posto aqui.

Valeu de novo Tato.

Tato, desculpa a demora na resposta. Fui executar esse procedimento somente hoje e..... não deu!

O que estou fazendo é o seguinte

_______________________________________________________________________

<script type="text/javascript">

$(document).ready(function(){

$("#img").hide();

$("#img1").hide();

})

var img = ["#img","#img1"]

 

var imgRand = img[Math.floor(Math.random()*img.length)]

 

$(imgRand).show;

 

</script>

<img id="img" scr="images/cabec_img_esq_01.png">

<img id="img1" scr="images/cabec_img_esq_02.png">

_______________________________________________________________________

... e ele simplesmente não aparece imagem alguma!!!! :(

O código acima está correto? Tenho que fazer alguma coisa dentro da <head>? Ele funciona para todos os browsers?

Valeu e fico no aguardo.

Tato? Ou alguém?

Me ajuuuuudem...por favor.....rs!

Valeu gente!

Binhofa· 4 de mai.

Pessoal, desculpem a minha insistência se não fosse tão urgente, mas realmente não estou conseguindo mesmo achar a solução para este problema. Procurei muito mas nao consigo achar nada em foruns.. nada!!!!

Conto somente com a ajuda de vocês!

Abraços e obrigado.