Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Ajuda - background rotativo

blanzone

Perguntado por blanzone,

 Share

Pergunta

blanzone

blanzone

Postado
Postado

galera sou novo aqui e preiso muitoi da ajuda de vocês..

estou criando um site e tenho q deixa-lo com o fundo rotativo...

são 3 imgs.... sendo q as deixo no topo e q não se repita....

como a img não são grandes fica um espaço vago abaixo delas, e o fundo branco não combina com ngm img

por isso queria colocar uma cor determinada pra cada img,

resumindo... quero por img e cor de fundo rotativo.....

alguém poderia me ajudar... estou correndo q nem louco atras disso.....

desde já agradeço a atenção de todos

Link para o comentário
Compartilhar em outros sites

20 respostass a esta questão

Posts Recomendados

  • 0
seth

seth

Postado
Postado (editado)

Fala ae!

Um código que fiz: 

<html>
<head> 

<style type="text/css" >

</style>

</head>

<body onLoad="trocaFundo()">

<script language="JavaScript" type="text/JavaScript" >

    capa = new Image;
    sa = new Image;
    sas = new Image;
    
    capa.src = "capa.jpg"
    sa.src = "sa.jpg"
    sas.src = "sas.jpg"

    fundoImg = new Array(capa.src,sa.src,sas.src);

    tamanhoI = 0;

    fundoCor = new Array("blue", "gray", "black")
    
    tamanhoC = 0;
    
function trocaFundo(){

    if ( tamanhoC == 3 ) { tamanhoC = 0; }
    
    else { trocaI();
         document.bgColor = fundoCor[tamanhoC]; 
        ++tamanhoC;
        
    }

    setTimeout("trocaFundo()", 2 * 1000 );

}    

function trocaI() { 

        document.topo.src= fundoImg[tamanhoC];
}

</script>

<p>
    <img src="" name="topo" > 

</p>

</body>
</html>

Troca o fundo automaticamente a cada 2 segundos!

E se quiser, hospedei um site para você ver: CLIQUE ( versão desatualizada )

Vai ter que esperar um pouquinho para carregar, ai dá para ver certinho...

Modifique para melhora-lo e use como quiser =D

Editei o código para ficar melhor!

falou E VLW!

Editado por seth
Link para o comentário
Compartilhar em outros sites
  • 0
blanzone

blanzone

Postado
  • Autor
Postado

só tem um problema desse comando

quando passa os 2 segundos a cor de fundo carrega primeiro q a foto....

tem q ser os dois ao mesmo tempo... não pode ter essa diferença de tempo de carregamento....

e também preferia que fosse quando a pagina fosse atualizada, não por tempo....

se for por tempo no máximo de manhã uma img, de tarde outra e de noite uma 3ª foto....

tipo programar a hora q ele deve trocar...

já vi comando assim mas não deu certo com a cor de fundo

acho q to complicando né = /

caramba to precisando muito desse comando

Link para o comentário
Compartilhar em outros sites
  • 0
blanzone

blanzone

Postado
  • Autor
Postado

não precisa seguir uma ordem.....

só quero q imagem e cor de fundo troquem ao mesmo tempo....

por exemplo....

- a imagem01 sempre vai ta com a cor defundo VERDE

- a imagem02 sempre vai ta com a cor defundo AZUL

- a imagem03 sempre vai ta com a cor defundo AMARELO

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Vou me intrometer, tudo bem?

Passarei uma idéia, existem várias formas de fazer, mostrarei uma em particular.

Você pode criar um vetor contendo objetos, que carregariam as propriedades que deseja.

Olha só:

<script>

    function f(element, vetor){
        var random=function(size){return Math.floor(Math.random()*size)}
        var n=random(vetor.length)
        
        var img=new Image()        
        img.src=vetor[n].src
        img.id=vetor[n].id
        img.onload=function(){element.style.backgroundColor=vetor[n].background}
        img.onerror=function(){element.style.backgroundColor="white"}
        
        element.appendChild(img)    
        element.innerHTML+=vetor[n].id
    }

</script>
No html, você pode criar o vetor e chamar a função f(), passando como argumento o elemento html: 
<div id="header">
	<script>
	f(
		document.getElementById("header"),
		[
			{"id":"imagem1", "src":"", "background":"blue"}, 
			{"id":"imagem2", "src":"", "background":"green"},
			{"id":"imagem3", "src":"", "background":"orange"}
		]
	)
	</script>	
</div>
src - Você coloca claro o caminho das imagens. background - A cor de fundo que deseja para essa imagem. id - Um nome para essa imagem caso queira manipulá-la com Javascript ou Css. Os id's podem conter o mesmo nome, já que só haverá uma imagem carregada. Você escolhe se deseja por o mesmo nome ou não. O fundo só vai trocar de cor quando a imagem estiver sido carregada totalmente, caso não for carregada por algum erro, o fundo será branco. Você pode mudar se quiser. Se desejar usar mais imagens, basta na chamada da função acrescentar novos elementos, o Javascript vai se encarregar do resto. Ex: Incluindo mais imagens: 
<div id="header">
	<script>
	f(
		document.getElementById("header"),
		[
			{"id":"imagem1", "src":"imgs/imagem1.gif", "background":"blue"}, 
			{"id":"imagem2", "src":"imgs/imagem2.gif", "background":"purple"},
			{"id":"imagem3", "src":"imgs/imagem3.gif", "background":"yellow"},
			{"id":"imagem4", "src":"imgs/imagem4.gif", "background":"green"},
			{"id":"imagem5", "src":"imgs/imagem5.gif", "background":"#336699"},
			{"id":"imagem6", "src":"imgs/imagem6.gif", "background":"black"},
			{"id":"imagem7", "src":"imgs/imagem7.gif", "background":"#333"},
			{"id":"imagem8", "src":"imgs/imagem8.gif", "background":"#afdd33"}
		]
	)
	</script>	
  </div>

Link para o comentário
Compartilhar em outros sites
  • 0
blanzone

blanzone

Postado
  • Autor
Postado

kakartoto brigadaw mesmo... você ta seguindo o meu pensamento

só q tentei aqui e não deu certo....

da uma olhadinha no meu codigo, não sei se estou comendo bola....

<html>
<head>
<meta>
<title>Untitled Document</title>

<script>

    function f(element, vetor){
        var random=function(size){return Math.floor(Math.random()*size)}
        var n=random(vetor.length)
        
        var img=new Image()        
        img.src=vetor[n].src
        img.id=vetor[n].id
        img.onload=function(){element.style.backgroundColor=vetor[n].background}
        img.onerror=function(){element.style.backgroundColor="white"}
        
        element.appendChild(img)    
        element.innerHTML+=vetor[n].id
    }

</script>

<style type="text/css">

<!--
body {
    margin-left: 0px;
    margin-top: 136px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-position: top;
}
-->
</style>

</head>

<div id="header">
<script>
f(
document.getElementById("header"),
[
{"id":"imagem1", "src":"imagem1.jpg", "background":"blue"},
{"id":"imagem2", "src":"imagem2.jpg", "background":"purple"},
{"id":"imagem3", "src":"imagem3.jpg", "background":"yellow"}
]
)
</script>
</div>

<body>
</body>
</html>

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Opa, cara, o que não funciona?

Ele não carrega as imagens? Ele carrega as imagens mas muda a cor do fundo antes? O que ?

Aqui eu to testando no FF e no Konqueror no linux.

Tenta executar no Firefox, vê se funciona.

Outra coisa, tire a linha "element.innerHTML+=vetor[n].id" da função. Ela só serviu pra debugar, pra saber se está funcionando direito.

Aqui rodou sussa....não tem erro no seu código.

Certifique-se de que as imagens estão no mesmo diretório do seu html, se elas estiverem em outra pasta, deverá botar o caminho correto lá no javascript.

Assim: {"id":"imagem1", "src":"minhasImagens/diretorio/m1.jpg", "background":"blue"}

Se colocar apenas o nome da imagem, está assumindo que ela está no mesmo diretório do seu arquivo html.

EDIT: SEU CÓDIGO TEM ERRO SIM!! O CORPO DO DIV ESTÁ FORA DA TAG <body></body> !!!!

DEIXE O DIV DENTRO DAS TAGS BODY PARA O EFEITO FUNCIONAR!!!!

Aquele abraço.

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Posta o seu código por favor.

Está testando em que navegador ?

você também não pode definir a imagem pela tag body. Lembre-se que está usando um div, deve posicionar o div e a imagem dentro dele adequadamente.

Link para o comentário
Compartilhar em outros sites
  • 0
blanzone

blanzone

Postado
  • Autor
Postado

cara ele ta funcionando direitinho....

vi aqui e ta dando certo

mas a img não ta no fundo e sim no topo.....

da uma olhada no codigo....

o conteudo está abaixo na imgagem q seria a img de fundo.....

<html>
<head>
<meta>
<title>Untitled Document</title>

<script>

    function f(element, vetor){
        var random=function(size){return Math.floor(Math.random()*size)}
        var n=random(vetor.length)
        
        var img=new Image()        
        img.src=vetor[n].src
        img.id=vetor[n].id
        img.onload=function(){element.style.backgroundColor=vetor[n].background}
        img.onerror=function(){element.style.backgroundColor="white"}
        
        element.appendChild(img)    
    }

</script>

<style type="text/css">

<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-position: top;
}
-->
</style>

</head>


<body>
<div id="header">
<script>
f(
document.getElementById("header"),
[
{"id":"imagem1", "src":"img/fundo01.jpg", "background":"#000000"},
{"id":"imagem2", "src":"img/fundo02.jpg", "background":"#000fff"},
{"id":"imagem3", "src":"img/fundo03.jpg", "background":"#555999"}
]
)
</script>
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td>teste, teste, teste, teste, teste, teste, teste, teste, teste, teste, teste, </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Hum...malditas tabelas.

Fazer o site em tabelas além de não ser recomendado, vai complicar um pouco nosso trabalho.

Perceba, o código está correto, mas ele insere no div, lembra? Não adianta você montar uma tabela abaixo do div, e querer que o div fique dentro da tabela....isso não funciona.

Tem como você postar um desenho do layout que pretende fazer? Pode ser simples, um rascunho.

Talvez eu consiga ajudar.

Aquele abraço

Edit:

Você pode fazer no style:

div#header img{
position:absolute;
}

Mas ainda não sei se é isso que quer....

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Ahhh...o cara não faz nada daquilo que comentou...

Existe sim uma demora no carregamento da imagem, o fundo fica de uma cor primeiro, depois a imagem é carregada e colocada no fundo do site.

O que ele faz é definir uma imagem e uma cor para o fundo, portanto:



<html>
<head>
<meta>
<title>Untitled Document</title>

<script>

    function f(vetor){
        var random=function(size){return Math.floor(Math.random()*size)}
        var n=random(vetor.length)
        document.body.style.backgroundImage="url("+vetor[n].src+")"
        document.body.style.backgroundColor=vetor[n].background        
    }

</script>

<style type="text/css">

<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-position: top;
}


-->
</style>

</head>


<body>

<script>
f(
[
{"id":"fundo", "src":"m1.jpg", "background":"#000000"},
{"id":"fundo", "src":"m2.jpg", "background":"#000fff"},
{"id":"fundo", "src":"m3.jpg", "background":"#555999"}
]
)
</script>
<center>
<table style="margin-top:150px" width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td>teste, teste, teste, teste, teste, teste, teste, teste, teste, teste, teste, </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</center>
</body>
</html>
[/codebox]

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...