» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Imagens que Rolam na Tela

Já publiquei no Imagens para Você uma dica com o link do blog da minha amiga Claudya sobre imagens que rolam na tela, mas vou republicar esta dica aqui com uma observação:

No Blog-Memories a Claudynha explica assim:

Este é o código:

<center><marquee direction="up" scrollAmount="1" style="background-color: #542E55; text-align: center; width:100px;height:130px;border:2px solid #ffffff;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='1'">
<a href="URL do link" title="texto"><img src=" url da imagem"</a>
<a href="URL do link" title="texto"><img src="url da imagem"</a>
</marquee></center>


No código, todas as partes abaixo podem ser mudadas a gosto de cada um:
  1. Background-color (cor do back);
  2. Scrollamount (rolagem entre): minímo de 1;
  3. Width (largura da caixa): está em 100px, mas mude como quiser;
  4. Height (altura da caixa): 130px, mas pode ser mudada;
  5. Border (grossura da borda): 2px (pode alterar);
  6. Border (estilo da borda): solid (pode alterar);
  7. Border (cor da borda): #ffffff (este é o código html de cor→é só mudar);
Não esqueça também de mudar os seguintes campos:
  • Url link: endereço do que você quer mostrar;
  • texto: digite e aparece quando passa o mouse por cima; (Ex: Título da Imagem)
  • Url imagem: endereço de onde a imagem está hospedada.
_______________________________________________________________

Minha observação:

Da forma que está definido dá um espaço entre a primeira e a última imagens, então para corrigir este problema o código deve ficar assim:
<marquee direction="up" onmouseover="this.stop()" style="border: 3px ridge rgb(255, 0, 0);" width="160" onmouseout=" this.start()" scrollamount="3" height="250">
<center>
<a href="URL do link" title="texto"><img src=" url da imagem"</a>
<a href="URL do link" title="texto"><img src="url da imagem"</a>
</center></marquee>
No começo do código onde está escrito: marquee direction="up" indica para que lado as imagens vão passar, nesse caso "up" indica para cima.

  • Se você quiser que as imagens rolem para baixo deverá escrever "down";


  • Se quiser que rolem para a direita escreva "right";


  • E para esquerda "left";


  • Scrollamount (rolagem entre): minímo de 1; → se aumentar esse número as imagens rolam mais rápido (sugestão:3 ou 4).


  • Se escolher "right" ou "left" não coloque o código <br> que significa pular uma linha, senão as imagens ficarão aglomeradas. Use <a href="URL do link" title="texto"><img src=" url da imagem"</a> apenas um espaço aqui entre as tags das imagens
    <a href="URL do link" title="texto"><img src="url da imagem"</a>
É isso que gostaria de acrescentar à dica sobre imagens que rolam na tela.
Imagens que Rolam na Tela Imagens que Rolam na Tela Reviewed by Áurea on 10/12/2007 Rating: 5

10 comentários:

  1. Obrigada mais uma vez!! Dica espectacular. Pouco a pouco vou melhorando o layout (eu sei que as colunas estão tortas LOL mas devagar chego lá)
    Grande 2008 para você

    ResponderExcluir
    Respostas
    1. TEM COMO ELIMINAR O ESPAÇO DEPOIS DO LOOP ENTRE O COMEÇO E O FINAL DA MARQUEE ?

      Excluir
  2. tem como fazer isso para a pagina do blog andar sozinha?
    Como fazer?

    ResponderExcluir
  3. Obrigada Aqui tem "De Tudo um Pouco".

    ResponderExcluir
  4. àurea querida!! você é sensacional, tem um didática excepcional, sem contar com a sua delicadeza no transmitir as dicas, pra mim vc é impar. Parabens!!

    Prefiro vir aqui antes de ir pra qualquer outro blog que tenha este tipo de ajuda!
    Beijo

    ResponderExcluir
  5. Obrigada Rose,
    Fico lisonjeada com suas palavras!
    Amo ensinar e encontrei aqui uma satisfação muito grande ao ver que algumas pessoas aprendem o que escrevo.
    Grande abraço.

    ResponderExcluir
  6. Gostaria de saber se há possibilidade de fazer as imagens
    rolarem como imagem do blog,
    a idéia é fazer com que as imagens fiquem passando eternamente rsrs
    mas fazendo parte do template,compreende?!
    eu tentei e não funcionou :/

    beijosaguardoreply:)

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.