[TUTORIAL] Imagem flutuante

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Imagem flutuante

Mensagem por Solkis em 30/05/09, 06:30 pm

A imagem flutuante é uma figura que fica em uma posição na página e acompanha a barra de rolagem. Sua utilidade é variada, desde informações e, até mesmo um pequeno logotipo do fórum.



--> Tutoriais, Dicas e Astúcias <--
Imagem flutuante




- Inserindo o códgo CSS
Para a mensagem funcionar correctamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:

Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
(clique na imagem para aumentar)
Onde terá de adicionar o seguinte código:
#flutuante {
display: scroll;
position: fixed;
Posição

}
Iremos compreender como definir a posição da imagem na página no próximo passo, então leia-o antes de adicionar este código á sua Folha de estilos CSS. Após adicionado, não se esqueça de clicar em Validar para salvar as alterações no código CSS.



- Definir a posição da imagem no fórum;
Para estas configuração, terá de ser adicionado algumas propriedades onde está escrito "posição" no código CSS apresentado no item anterior.

Vejamos como devemos fazer a configuração:
Primeiro deveremos definir onde ela estará posicionada em relação ao topo ou a parte inferior do fórum. Veja a aplicabilidade:
top:10px;
Vermelho -> Deverá ser top para topo da página ou bottom para a parte inferior. Lembre-se que se adicionar um não necessitará adicionar o outro.
Verde -> É a distância entre o topo ou a parte inferior, dependerá do que foi definido na indicação dada acima.

Após definir a posição vertical, teremos de definir se ele estará localizado á direita ou á esquerda. Vejamos como estruturar:
left:5px;
Vermelho -> Deverá ser left para a esquerda da página ou right para a margem direita da página. Lembre-se que se adicionar um não necessitará adicionar o outro.
Verde -> É a distância entre a margem e a imagem direita ou esquerda, dependerá do que foi definido na indicação dada acima.

Como resultado final á adicionar, no caso deste exemplo teríamos:
top: 10px;
left: 5px;


- Elaborar o código HTML
Após inserir o código CSS teremos de trabalhar o código para que o mesmo funcione. Para isso somente terá de adicionar a este código predefinido o endereço da imagem:
<img id="flutuante" src="Endereço_da_imagem" />
Vermelho -> Será o endereço da imagem que deseja adicionar. Lembre-se de que o mesmo terá de estar em um formato de imagem, caso contrário o código não irá funcionar perfeitamente.


- Teremos de inserir o código para que funcione em todas as páginas:
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 a:
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)

Foi mencionado este exemplo, mas poderá colocar este código em qualquer parte do Fórum, desde que aceite HTML, poderá fazê-lo em widgets, mensagem da Home Page, ou em mensagens, desde que estas aceitem a linguagem HTML (este não muito recomendável).


- Resultado final, com uma imagem de exemplo:

(carregue na imagem para aumentar)




© Fórum dos Fóruns



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Imagem flutuante
avatar

Solkis
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9983
Pontos Ativos : 12075

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum