HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Letreiro Digital

Para criar um letreiro digital basta envolver o texto com as tags <marquee></marquee>
Exemplo: <marquee>Texto envolvido</marquee>

Resultado:

Texto envolvido

Você pode formatar um letreiro digital para ajustar sua direção, velocidade, comportamento, alinhamento, tamanho, número de repetições e cor de plano de fundo.

Para formatar um letreiro digital basta inserir dentro da tag de abertura <marquee> um ou mais parâmetros abaixo descritos:

Direction - define a direção com que o texto do letreiro se move.
Sintaxe: direction="X"
onde X pode assumir os seguintes valores:
left - (para a esquerda)
right - (para a  direita).
up - (para cima)
down
- (para baixo)

Exemplos: letreiro se movendo para a direita
<marquee direction="right">movendo para a direita</marquee>
Resultado:movendo para a direita

movendo para a cima (direction="up")


 

Behavior - tipo de movimento utilizado para animar o texto em um letreiro digital.
Sintaxe:behavior="X"
onde X assume um dos valores descritos a seguir: 
scroll - (rolar) se quiser que o texto do letreiro digital role pela tela como um visor de avisos
slide - (deslizar) se quiser que o texto do letreiro digital deslize para a tela, ou
alternate - (alternar) se quiser que o texto do letreiro digital se alterne entre rolagem e deslizamento. 

Exemplo de letreiro com o valor alternate:
<marquee behavior="alternate">entre rolagem e deslizamento</marquee>
Resultado:

entre rolagem e deslizamento

 

Loop - Para especificar quantas vezes o efeito de texto em um letreiro digital deve ser executado.
Sintaxe: loop="X"
onde X é um número inteiro. Os valores -1 (menos um) e infinite indicam um número infinito de vezes.
Exemplo: <marquee loop="2">texto</marquee> .
Obs: se você não estiver vendo o letreiro é porque já executou o loop igual a 2
 

texto aqui


 

Bgcolor - Para definir a cor do plano de fundo de um letreiro digital.
Sintaxe: bgcolor="XXXXXX"
onde XXXXXX é o código da cor
Exemplo - <marquee bgcolor="FFFF00">fundo amarelo</marquee>

fundo amarelo

 

Width e Height - Para especificar o tamanho de um letreiro digital,  Largura e Altura respectivamente, em pixels ou como uma porcentagem da janela do navegador.
Exemplo - <marquee width="98" height="20%">largura e altura</marquee>

largura e altura

 

Scrollamount - Especifica, em pixels, a quantidade de distância para a qual o texto de letreiro digital irá se mover, ou melhor, a velocidade com que o texto do letreiro se move.
exemplos:
<marquee Scrollamount="2">texto</marquee>

texto
<marquee Scrollamount="13">texto</marquee>

texto


Scrolldelay - Especifica, em milissegundos, o intervalo antes que o texto do letreiro digital comece a  se mover.
exemplo: <marquee scrolldelay="500" >texto</marquee>

texto

 

Hspace - especifica a quantidade de espaço deixado em branco aos lados da marquee.
Vspace - especifica a quantidade de espaço deixado em branco acima e abaixo da marquee.
Exemplo: neste exemplo temos um espaço de 40 pixels acima e abaixo do letreiro
<marquee hspace="100vspace="40">texto</marquee>
Resultado:

texto

Formatar a fonte de um letreiro digital
É possível formatar a fonte do texto exibido no letreiro. Você pode selecionar uma fonte
personalizada ou utilizar uma cor de fonte diferente.
Exemplo:
<marquee><b><i><font face="verdana" color="ff0000">Meu primeiro Letreiro Digital</font></b></i></marquee>
Resultado:

Meu primeiro Letreiro Digital

ou
<marquee style="color: #0000FF; font-family: Arial">Meu primeiro Letreiro Digital</marquee>
Resultado: Meu primeiro Letreiro Digital


 

 

Imagens no marquee
Sintaxe: <marquee><img src="endereço da imagem"></marquee>
Exemplo:
<marquee><img src="/kit/tutorial/html/images/but1_up.gif"></marquee>
Resultado:


Letreiro que para com o mouse sobre e volta a rolar na retirada do mesmo
Sintaxe:
<marquee OnMouseOver="javascript:this.stop()" OnMouseOut="javascript:this.start()"> ELEMENTO</marquee>
onde ELEMENTO pode ser o que você desejar (texto, imagens, links etc...)

Exemplo: o elemento é uma imagem link
<marquee OnMouseOver="javascript:this.stop()" OnMouseOut="javascript:this.start()" scrolldelay="33" bgcolor="#DDFEFE" width="70%"><a href="/index.php"><img border="0" src="/kit/tutorial/html/images/kithomepage.gif"></a></marquee>

Resultado:


Na caixa de Teste on-line abaixo você poderá configurar e testar um letreiro digital com os vários parâmetros acima. Para letreiros com imagem utilize um endereço de qualquer imagem da Internet (URL completo) ou utilize o endereço a seguir:  /kit/tutorial/html/images/brasil2.gif

Teste on-line: