Assinatura com mapa clicável em HTML

De Task Wiki
Revisão de 16h02min de 4 de maio de 2018 por Taleslacerda (discussão | contribs)
Ir para: navegação, pesquisa

Todo mundo já viu uma assinatura de e-mail bonita, com a logo da empresa, ou uma arte que pareça um cartão de visitas. Mas e se você quer avançar um pouco mais e tornar esse "cartão de visitas" interativo, com cada pedacinho ou imagem ou texto apontando para um lugar, como seu blog, o site da empresa ou uma rede social onde tem presença?

Para fazer isso, você precisará usar a linguagem <a href="https://pt.wikipedia.org/wiki/HTML" target="_blank">HTML</a> para fazer um código personalizado na assinatura do seu e-mail. Nem todas as plataformas de e-mail permitem isso (Gmail não permite, por exemplo), mas o <a href="http://webmail.task.com.br target="_blank">Webmail</a> da Task, sim, permite, e vamos te mostrar agora que não é nada complicado. As orientações valem também para softwares de e-mail como o <a href="https://www.thunderbird.net/pt-BR/" target="_blank">Mozilla Thunderbird</a>. 

 * * * Para este tutorial, será necessário hospedar a imagem de sua assinatura em seu FTP. Para realizar este procedimento, siga o passo a passo no link a seguir. https://wiki.task.com.br/index.php/Gerenciador_de_FTP_-_Filezilla

Para inserir uma assinatura com links clicáveis na imagem, basta seguir o passo a passo logo abaixo:


Elipse 1.png Acesse https://www.image-map.net/.

Elipse 2.png Clique em 'Load image from Website';


Mapawiki2.png


Elipse 3.png Informe o link da imagem de sua assinatura. Ex: http://seudominio.com.br/assinatura.jpg e clique em 'Continue';


Mapawiki3.png


Elipse 4.png No campo 'Shape' você poderá selecionar as formas geométricas do mapa. 

     Rect - Retângulo
     Poly - Poligono
     Circle - Círculo


Mapawiki4.png


Elipse 5.png Clique na imagem para selecionar o ponto inicial, depois clique novamente para selecionar o ponto final. (Você pode aumentar ou diminuir o tamanho mantendo o botão esquerdo do mouse pressionado e arrastando.);


Mapawiki41.png


Elipse 6.png Você poderá adicionar outras áreas clicáveis na imagem clicando em 'Add new area';


Mapawiki5.png


Elipse 7.png No campo 'Link', informe o endereço para onde será redirecionado ao clicar;


Mapawiki6.png


Elipse 8.png No campo 'Title', crie um título para o mapa clicável;


Mapawiki7.png


Elipse 9.png No campo 'Target', selecione a opção '_blank';


Mapawiki8.png


Elipse 10.png Clique em 'Show me the code!';


Mapawiki9.png


Elipse 11.png Copie o código gerado;


Mapawiki10.png


Elipse 12.png Cole no campo "Assinatura" do Webmail (link do wiki: https://wiki.task.com.br/index.php/Inserir_Assinatura_pelo_Webmail) ou em seu programa de e-mails (deverá suportar assinatura no formato HTML)


 * * * Atenção: Por se tratar de uma ferramenta de terceiros, a Task não se responsabiliza pelo correto funcionamento da mesma.
Disponível em “https://wiki.task.com.br/index.php?title=Assinatura_com_mapa_clicável_em_HTML&oldid=6690”