Imagens em Scroll



Da mesma forma que para texto, para criar imagens rolando na tela, basta  copiar o código HTML abaixo:

<marquee heigth="yyy" widht="xxx" direction="direção" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="">
<a href="link 1" target="_blank">
<img border ="0" src="URL da imagem 1"></a>
<a href="link 2” target=”_blank”>
<img border ="0" src="URL da imagem 2"></a>
</marquee>




Definição dos parâmetros de ajuste da(s) imagens(s) em scroll:

yyy: Altura do espaço de rolagem (em pixels)
xxx: Largura do espaço de rolagem (em pixels)
direção: define a direção de rolagem

            up – de baixo para cima

            down – de cima para baixo

            left – da direita para a esquerda

            right – da esquerda para a direita



nº: Velocidade de rolagem (quanto maior o número maior a velocidade)

Link 1, Link 2, etc: Definia o link que você da página que desejar quando a imagem for clicada

URL da imagem 1, URL da imagem 2, etc: Definia o endereço URL da imagem a ser mostrada


***Observação:

O comando onmouseover="this.stop()" onmouseout="this.start()" define que quando você posiciona o cursor do mouse sobre o(s) texto(s) ou  imagens eles param de rolar. Muito útil quando utilizado com links…

1) Imagens com links na horizontal

<marquee heigth="480" widht="480" direction="right" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"><a href="http://misstutos.blogspot.com.br/" target="_blank"><img border="0" src="https://3.bp.blogspot.com/-IlnuZvyR6HY/V2cF_p1LgHI/AAAAAAAAA6M/s95p2nHU0VcCSb6MqosWb49S9myE8jUKgCLcB/s1600/Tuto55.jpg"></a><a href="http://misstutos.blogspot.com.br/" target="_blank"><img border ="0" src="https://3.bp.blogspot.com/-IlnuZvyR6HY/V2cF_p1LgHI/AAAAAAAAA6M/s95p2nHU0VcCSb6MqosWb49S9myE8jUKgCLcB/s1600/Tuto55.jpg"></a><a href="http://misstutos.blogspot.com.br/" target="_blank"><img border ="0" src="https://3.bp.blogspot.com/-IlnuZvyR6HY/V2cF_p1LgHI/AAAAAAAAA6M/s95p2nHU0VcCSb6MqosWb49S9myE8jUKgCLcB/s1600/Tuto55.jpg"></a><a href="http://misstutos.blogspot.com.br/" target="_blank"><img border ="0" src="https://3.bp.blogspot.com/-IlnuZvyR6HY/V2cF_p1LgHI/AAAAAAAAA6M/s95p2nHU0VcCSb6MqosWb49S9myE8jUKgCLcB/s1600/Tuto55.jpg"></a></marquee>



2) Imagens com links e texto alternativo (texto aparece quando você posiciona o cursor sobre a imagem) na vertical

<marquee heigth="" widht="" direction="down" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"><center><a href="http://misstutos.blogspot.com.br/" target="_blank"><img border="0" alt="Miss Tutos" title="Miss Tutos"src="https://3.bp.blogspot.com/-IlnuZvyR6HY/V2cF_p1LgHI/AAAAAAAAA6M/s95p2nHU0VcCSb6MqosWb49S9myE8jUKgCLcB/s1600/Tuto55.jpg"></a><a href="http://misstutos.blogspot.com.br/" target="_blank"><img border ="0" alt="Miss Tutos" title="Miss Tutos"src="https://3.bp.blogspot.com/-IlnuZvyR6HY/V2cF_p1LgHI/AAAAAAAAA6M/s95p2nHU0VcCSb6MqosWb49S9myE8jUKgCLcB/s1600/Tuto55.jpg"></a><a href="http://misstutos.blogspot.com.br/" target="_blank"><img border ="0" alt="Miss Tutos" title="Miss Tutos"src="https://3.bp.blogspot.com/-IlnuZvyR6HY/V2cF_p1LgHI/AAAAAAAAA6M/s95p2nHU0VcCSb6MqosWb49S9myE8jUKgCLcB/s1600/Tuto55.jpg"></a></center></marquee>

 


Com as dicas acima , voce pode combinar comandos e criar scrolls como desejar.

Nenhum comentário:

Postar um comentário