Ir para conteúdo

POWERED BY:

Arquivado

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

thiagofernandes.com

Será que é Possível ??

Por , em Desenvolvimento frontend

Recommended Posts

thiagofernandes.com    0

thiagofernandes.com
Postado

Olá, Pessoal !!Eu já havia feito esta pergunta no Forum de "Java / DHTML" e gostaria de saber se em CSS isso é possivel !!Pois então,Gostaria de Saber se é Possível Criar um Background dinâmico em CSS ??Como assim ??Cada vez que acessar o site ou atualiza-lo o Background muda !!Por ex:Eu tenho 5 telas ".jpg" na pasta "img" ai o css buscaria as imagens uma por vez !!Será que é possível ??Obrigado !!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

e teria como utilizar js dentro de uma tag div para que carregue os background?

Não entendi muito bem sua pergunta, mas o fato é que só assim é possível... Por quê? Pq o JS não pode ser incluso no arquivo CSS externo... Então, nesses casos, o q você tem, a fazer é usar o tal do DOM do JS para modificar seu background, e isso é feito no arquivo HTML. A idéia de criar um background randômico segue o mesmo raciocínio desse script aqui, postado há poucos dias: Imagens Dinâmicas. Neste tópico foi discutido um script que muda a imagem a cada acesso... Dá uma olhadinha lá e veja se consegue adaptar à sua situação...

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Da pra fazer com js ou com uma linguagem server-side[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

jackvalantine    0

jackvalantine
Postado

beleza paulo, mas ainda não consegui vizualizar como adicionar no css......o site em questão é esse www.amsilva.com ,o que eu queria fazer é que as imagens da esquerda que estão como background fossem trocando a um certo tempo.a e esse é o 1º site em css que faço, então meu conhecimento ainda é meu pobre no assunto.se você ou o inside puderem me ajudar, a e inside aprendi muito assistindo suas video aulas, parabens pela iniciativa e espero por mais aulas......

Compartilhar este post

Link para o post
Compartilhar em outros sites

Siquinelli    0

Siquinelli
Postado

Opa, beleza?

Rapaz, dificilmente você vai achar sempre scripts prontos para algumas coisas e acho que isso é uma delas.

 

Bom, vê se ajuda e você compreende meu raciocínio lógico:

 

teste.htm

<html><head><!-- Puxando o arquivo externo Javascript--><script src="codigo.js"></script></head><body></html>

codigo.js

function imagem_randomica(){//organizando as imagens de plano de fundovar imagem= new Array("fundo1.jpg", "fundo2.jpg", "fundo3.jpg");//quantos objetos há no array?var quantidade=imagem.length;//buscando o numero randômicovar randomico=Math.floor(Math.random() * quantidade);//determinando como plano de fundo a imagem randômicadocument.body.background=imagem[randomico];}window.onload=imagem_randomica;
Salva na mesma pasta 3 imagens: fundo1.jpg, fundo2.jpg, fundo3.jpg

 

Dica do Lucio Leonardo

 

[]s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Bom, tentei aqui e fiz o seguinte (mesmo não manjando praticamente nada de JS consegui seguir pela lógica... rsrsrs):

 

Testei no FF2 e no IE6... O único porém desse método foi que, ao validar o documento, apresenta um erro, justamente na linha do document.write... Se alguém souber outra maneira de se trabalhar com isso para que o documento seja validado...

 

Bom, segue o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<title>Backgrounds Randômicas!</title>		<style type="text/css">		div#exemplo {			text-align: center;			background: url(imagens/img1.GIF) no-repeat;			width: 424px;			height: 329px;			overflow: hidden;		}		</style>		<script type="text/javascript">			function ImgDinamica(){					var MinhasImagens = new Array()					MinhasImagens[1] = "imagens/img1.GIF"			MinhasImagens[2] = "imagens/img2.GIF"			MinhasImagens[3] = "imagens/img3.GIF"			MinhasImagens[4] = "imagens/img4.GIF"			MinhasImagens[5] = "imagens/img5.GIF"			MinhasImagens[6] = "imagens/img6.GIF"			MinhasImagens[7] = "imagens/img7.GIF"			MinhasImagens[8] = "imagens/img8.GIF"					var Img = Math.floor(Math.random()*MinhasImagens.length)					if (Img == 0)				{					Img = 1				}				document.write('<style type="text/css">div#exemplo { background: url(' + MinhasImagens[Img] + ') no-repeat;}</style>');			}			ImgDinamica()		</script>	</head>	<body>		<div id="exemplo">Texto</div>	</body></html>
Se você quiser, veja este exemplo on-line. Atualize a página para visualizar o efeito.

 

Então, é isso... Ficamos no aguardo de uma solução que valide pelo menos...

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

jackvalantine    0

jackvalantine
Postado

então Paulo neste exemplo que você deu eu achei uns modelos na net, mas o que eu queria mesmo era que a imagem fosse mudando mas sem precisar dar refresh na pagina, e muito obrigado pela ajuda......são pessoas como você que fazem o mundo melhor, sempre ajudando os que precisam.......

 

vlw.

 

 

eu achei esse aqui no forum, mas não sei como utilizar ele com o css.

 

<script language="javascript">

i=0;

function muda(){

//--- os fundos.

img = new Array();

img[0]="seta1.gif";

img[1]="seta2.gif";

//---

//alert(document.getElementById('fundo').background);

document.getElementById('fundo').background=img;

i++;

if (i==img.length){ i = 0; }

setTimeout("muda()",5000);

}

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

então Paulo neste exemplo que você deu eu achei uns modelos na net, mas o que eu queria mesmo era que a imagem fosse mudando mas sem precisar dar refresh na pagina, e muito obrigado pela ajuda......são pessoas como você que fazem o mundo melhor, sempre ajudando os que precisam...

http://forum.imasters.com.br/public/style_emoticons/default/grin.gif Muito obrigado pelo reconhecimento, meu caro jackvalantine... Fico muito contente em saber que tenho ajudado tds vcs aki no fórum, e sempre trabalharei em cima disso para que eu possa ajudar cada vez mais...

 

Mas então, eu não sabia que era para mudar a cada acesso, e sim durante a navegação... Olha, nesse caso, nem sem como fazer... O exemplo que você deixou de JS, eu nem tenho como ajudar pq eu não manjo de JS... Tô querendo muito estudar isso, mas tá complicado...

 

Mas é isso a e... E, claro, se você encontrar uma solução, por favor, poste aqui pra gente... Tenha certeza que isso seria destacado... (Eu pelo menos destacaria, afinal, é um script muito interessante)...

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito