Como inserir um ou mais links
apenas em partes de uma imagem

Publicado em 31 de agosto de 2016
por Welington Gonzaga
Como inserir um ou mais links <br>apenas em partes de uma imagem
# HTML #
0

A recomendação para quem quer se aventurar no universo dos blogs é aprender o básico da linguagem HTML. São códigos simples que podem fazer toda a diferença na hora de alinhar um texto, de inserir uma imagem com legenda colorida ou até de definir a abertura de um link numa nova janela do navegador. Apesar da simplicidade, a linguagem HTML deixa o layout com aspecto muito mais profissional.

O uso frequente desses códigos — que vêm entre sinais de maior ( < ) e menor ( > ) — ajuda na memorização dos comandos. O segredo para dominar a linguagem básica de HTML, então, está na prática e na pesquisa. Quando o uso de < EMBED >, < DIV >, < B >, entre outros vira rotina, naturalmente, o código é internalizado pelo usuário. Para situações mais complexas existem alternativas que estruturam automaticamente o HTML, o que pode ajudar.

Considere a seguinte demanda: inserir cinco links diferentes numa única foto, respectivamente, para YouTube, Twitter, Facebook, Instagram e Blog. A tarefa talvez seja fácil para uma pessoa com conhecimento avançado em HTML, mas não para um iniciante. A dica, então, é um site chamado “Image Map Tool” (acesse aqui).

A ferramenta pode ser acessada online e gratuitamente. Para começar basta inserir a imagem (ou colar seu link) na qual se deseja inserir os links. O processo é parecido com o anexar de um arquivo num e-mail. Em seguida, use o botão direito do mouse para acionar o menu de opções sobre a imagem. “Create Rect” insere uma área de link retangular; “Create Circle” uma área circular; e, a mais eficiente das três opções, “Create Poly” permite o desenho de uma área personalizada.

Na janela de configurações, dentro da aba “Options“, digite o link de destino no campo “Map URL“. Já na aba “Events“, escolha a opção “_blank” para fazer com que o link se abra numa nova aba. Terminadas as configurações, clique em “Save” para salvar as alterações.

Repita o mesmo procedimento para cada um dos links que deseja criar. Finalizada essa fase, clique novamente com o botão direito do mouse e escolha a opção “Get code” para obter o código HTML gerado. Confira mais uma vez se o link da imagem está correto e, na aba “HTML Code” o código estará no último campo disponível. Basta copiar e colar na postagem do blog.

Image Map

Deixe seu comentário