Uma imagem mapeada nada mais é que, uma área clicável em uma imagem. Existem várias maneiras de mapear uma imagem, inclusive empregando
CSS. Uma delas, bem prática e fácil é utilizando um mapeador online.
Mapeei a imagem do cabeçalho do blog e, substitui a nuvem de tag, por uma imagem também mapeada. É essa imagem que vou tomar como base para o tutorial de hoje.

Criei essa imagem no photoshop, mas é possível fazê-la em qualquer editor de imagem. É bem simples, fui adicionando os marcadores de forma aleatória. Não vou entrar muito em detalhe sobre a criação da imagem, porque o objetivo do post não é esse.
Acesse image maps, você terá a opção de abrir a imagem do seu PC, ou à partir de uma URL. Recomendo que hospede sua imagem no servidor de sua preferência (imageshack, picasa, tinypic…), pois, o risco de sua magem desaparecer é bem menor.
Cole a URL na área destinada e clique em ‘’start mapping your image’’. Na próxima página, clique em ‘’continue to next step’’.
Vai abrir uma página parecida com esta:
Deixe selecionada a caixa ‘’base URL’’ e desmarque ‘’Show Text Links’’. Mantendo ‘’show text links’’ marcada, aparecerá as ligações de texto embaixo da imagem e, esteticamente não é nada bonito. Para adicionar os links, clique em ‘’rectangle’’ e selecione a palavra ou imagem que receberá o link.
Clique em ‘’save’’ e vá repetindo se necessário. Quando terminar, clique em ‘’get your code’’.
Quer sua iimagem como elemento de página, basta, copiar o ‘’HTML code’’. No próximo post, vou ensinar como colocar uma imagem mapeada no cabeçalho do blog. Portanto, fiquem atentos :p e até a próxima! ;)
Fonte:http://balaiodicas.blogspot.com/2010/09/mapear-imagem-online.html
Nenhum comentário:
Postar um comentário