:: Tutorial de E-mails ::

Curso de Formatação Intermediário- Lição 21 - Moldura com efeito em uma imagem

Muitas pessoas têm-me pedido códigos para criar uma moldura em uma imagem, sem precisar de recursos do PSP ou de outro editor de imagens. Este script é adaptado do site Dynamic Drive ( www.dynamicdrive.com) endereço do qual faço muitas adaptações para e-mails. Se você não conhece o site, vale a pena conferir a variedade de scripts que encontramos por lá. Apesar de apresentar scripts para sites (que nem sempre funcionam para e-mails), podemos adaptar os scripts e fazê-los funcionar no Outlook. Como nossa proposta é a de fazê-los criar e adaptar seus próprios scripts, fica aqui uma sugestão de site que realmente tem muito a oferecer: Dynamic Drive.

Muito bem, vamos ao script que possibilita usar uma moldura em uma imagem. Na verdade, este script cria uma tabela dentro da qual a imagem é colocada, possibilitando a criação de uma borda para a imagem, com um diferencial: a borda tem efeito "piscante".

Aqui está o script:

<DIV align=center>
<TABLE border=0 id=myexample
style="BORDER-BOTTOM: #d999bf 10px solid; BORDER-LEFT: #d999bf 10px solid; BORDER-RIGHT: #d999bf 10px solid; BORDER-TOP: #d999bf 10px solid">
<TBODY>
<TR>
<TD>
<DIV align=center><IMG align=baseline alt="" border=0 hspace=0 src="endereço de sua imagem sempre entre aspas"></DIV>
</TD></TR></TBODY></TABLE></DIV>
<DIV align=center> </DIV>
<DIV align=center><FONT color=#000080 face="Verdana">Texto aqui
</FONT></DIV>
<SCRIPT language=JavaScript1.2>
<!--

/*
Flashing Table Border Script-
© Dynamic Drive ( www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

function flashit(){
if (!document.all)
return
if (myexample.style.borderColor=="blue")
myexample.style.borderColor="red"
else
myexample.style.borderColor="blue"
}
setInterval("flashit()", 600)
file://-->
</SCRIPT>

Como usá-lo?

Coloque o script antes de </BODY> e substitua o endereço da imagem.

Você pode alterar a espessura da borda e o efeito.

Para alterar a cor que pisca, basta trocar o que está assinalado em preto nesta parte do código:

function flashit(){
if (!document.all)
return
if (myexample.style.borderColor=="blue")
myexample.style.borderColor="red"
else
myexample.style.borderColor="blue"
}

Observe que este script apresenta as cores por nomes em inglês. Podemos alterar os nomes pelos códigos hexadecimais de cores (#ffffff) para conseguirmos uma variação maior de tons.

Você pode alterar também a velocidade do "pisca-pisca", alterando aqui:

setInterval("flashit()", 600)
Mas faça esta alteração de forma a obter um resultado agradável. Se você usar um valor muito baixo, por exemplo, 50 ou 100, vai piscar demais e nem sempre fica interessante. Aconselho valores entre 500 e 900, mas é uma questão de gosto.

Detalhe importante: se você não gosta de efeitos piscantes e adora uma moldurinha na imagem, pode usar, sem medo, o seguinte código, antes de </body>:

Você poderá fazer as alterações com relação a cor, espessura e estilo de borda e terá apenas uma moldura simples na imagem.

Tarefa:

Crie dois e-mails separados. Em cada um deles, aplique um fundo (background), mensagem de rodapé, moldura e barra de rolagem colorida na mensagem e insira uma imagem (de preferência não muito grande). No primeiro e-mail, use uma moldura sem o efeito piscante na imagem. No segundo e-mail aplique o efeito piscante na imagem. Lembre-se de escrever um pequeno texto, depois da imagem. Faça a escolha de imagens e de cores de modo a conseguir algo harmonioso e bonito.

Agora é só inserir seu cartão de visitas e enviar para o grupo.

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo


	.