Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 3 usuários online :: 0 registrados, 0 invisíveis e 3 visitantes :: 1 motor de buscaNenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Imagem do fundo aleatório
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts HTML, BBCode e Javascript
Página 1 de 1
[TUTORIAL] Imagem do fundo aleatório
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Imagem do fundo aleatório |
Geralmente os administradores preferem utilizar uma lista de imagens de fundos para seu fórum, mas com este tutorial poderemos resolver esse problema automaticamente, pois poderemos utilizar várias imagens se serão alternadas aleatóriamente cada vez que a página for carregada.
--> Tutoriais e astúcias <--
Imagem do fundo aleatório
Imagem do fundo aleatório
1º - Entender como o código funcionará:
Como o código é o mesmo para todas as versões, somente terá que tomar cuidado com os valores que colocará, mas com esta explicação será bem fácil de entender como ele funciona e também todas as propriedades que são possíveis de personalizar para cada fundo.
O código, em três partes, que deverão ser unidas em uma página HTML ao final do tutorial:
No topo:
- Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
<script>
backgroundImage = new Array();
backgroundColor = new Array();
backgroundRepeat = new Array();
backgroundAttachment = new Array();
backgroundPosition = new Array();
Para cada imagem de fundo:
backgroundImage.push('Endereço da imagem');
backgroundColor.push('Cor do fundo');
backgroundRepeat.push('repeat-x');
backgroundAttachment.push('fixed');
backgroundPosition.push('left top');
Vermelho -> Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
Verde -> Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor, que aparecerá caso não queira que a imagem se repita.
Violeta -> Permitirá definir se a imagem toma uma posição de rolagem (scroll), sendo que estará sempre na mesma posição, independentemente do tamanho da caixa de texto, ou de fixagem (fixed), que fará com que a imagem fique na posição definida.
Laranja -> Definirá se haverá repetição da imagem ou não (no-repeat), podendo esta repetição fazer-se somente na horizontal (repeat-x), na vertical (repeat-y) ou também nos dois planos (repeat).
Preto -> Para definir a posição da imagem, se no topo (top), em baixo (bottom), à esquerda (left), à direita (right) ao centro (center), ou então por definição de valores em percentagem (%) ou em píxeis (px).
De qualquer forma, somente precisará mudar a cor e a imagme de fundo, os outros valores poderão ser deixados como estão, caso não saiba modificar devidamente.
No final:
- Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
jQuery(function() {
random = Math.floor(Math.random()*backgroundImage.length);
jQuery('body').css({
'background-image': 'url(' + backgroundImage[random] + ')',
'background-color': backgroundColor[random],
'background-repeat': backgroundRepeat[random],
'background-attachment': backgroundAttachment[random],
'background-position': backgroundPosition[random]
});
});
</script>
2º - Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Título - Pode colocar o título que quiser para a página, não irá afetar em nada. |
Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente. |
Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código. |
Código HTML - Coloque aqui o código que trabalhamos no item anterior. |
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
3º - Inserir o código para que funcione em todas as páginas do fórum:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.
Para adicionar o código aceda à:
Painel de Controle -> Geral -> Fórum -> Configurações
Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
O código será:
Por exemplo, no FdF:<script src="ENDERECO-DA-PAGINA-HTML"></script>
<script src="http://ajuda.forumeiros.com/h1-imagemdefundoaleatoria"></script>
©
Fórum dos Fóruns
Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Imagem do fundo aleatório |
Tópicos semelhantes
» [TUTORIAL] Adicionar imagem no fundo do menu
» [TUTORIAL] Logo aleatório
» [TUTORIAL] Background aleatório
» [TUTORIAL] Imagem flutuante
» [TUTORIAL] Mudar imagem ao passar o mouse
» [TUTORIAL] Logo aleatório
» [TUTORIAL] Background aleatório
» [TUTORIAL] Imagem flutuante
» [TUTORIAL] Mudar imagem ao passar o mouse
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts HTML, BBCode e Javascript
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry