Tutorial Mapas de imagens baseado em CSS

15 de outubro de 2008

Mapas de imagens foram muito usados no auge do Flash. Sua utilidade ainda se encontra em templates criativos, pois eles nos ajudam a ampliar o visual e a interatividade do usuário com o Blog ou WebSite.
Este tutorial se propõe a ensinar a criar um mapa de imagens baseado em CSS. Faremos um exemplo simples, mas que pode ser expandido para versões mais complexa, dependendo da criatividade de cada um.
OBS: Mapas de imagens ainda continua sendo uma parte válida da HTML/XHTML, por misturar conteúdo e apresentação.

Para este exemplo criei uma imagem simples de um Header com três itens de menus, mas você pode usar fotos, etc.


A primeira coisa que fazemos é adicionar a imagem à página, dentro de um div nomeado

<div id=”mapa”>
<img src=”imagem/headerexemplo.gif” width=”370” height=”150” alt=”Teste de mapas de imagens” />
</div>


Em seguida adicione uma lista de links ao site ou blog de cada item do menu.
Cada item do menu precisa estar dentro de uma classe para podemos indentificar sua posição no CSS.

<div id=”mapa”>
<img src=”imagem/headerexemplo.gif” width=”370” height=”150” alt=”Teste de mapas de imagens” />

<ul>
<li class=”home”>
<a href=”home.html” title=”home”>Home</a>
</li>
<li class=”somos”>
<a href=”somos.html” title=”Quem Somos”>Quem Somos</a>
</li>
<li class=”contato”>
<a href=”contato.html” title=”Contato”>Contato</a>
</li>
</ul>
</div>


Vamos agora para o CSS e suas propriedades:
Configure a largura e altura do div de modo que correspondem com as dimensões da imagem. Depois configure a propriedade position como relative. Aqui está o segredo desta técnica.


#mapa {
width: 370px;
height: 150px;
position: relative;
}


Os marcadores da lista de links não pode aparecer, portanto, remova-os configurando a propriedade list-style como none. Para completar zere margin e padding da lista:

#mapa ul {
margin: 0;
padding: 0;
list-style: none;
}


Agora precisamos estilizar os links, posicionando os links de âncora absolutamente. Também precisamos configurar a largura e altura deles para criarmos uma área clicável.
Os links ainda continuam a ser exibidos, então damos um grande recuo de texto para oculta-los.

#mapa a {
position: absolute;
width: 100px;
height: 50 px;
text-indent: -1000px;
}

Os links individuais agora podem ser posicionados:

#mapa .home a {
top: 4px;
left: 8px;
}

#mapa .somos a {
top: 4px;
left: 117px;
}

#mapa .contato a {
top: 4px;
left: 237px;
}


As posicões das imagens são conseguidas através do editor que você usa. Crie as imagens e clique nelas e veja nas propriedades as posições X e Y e coloque na CSS.
Está é uma técnica básica que pode ser evoluída, com criatividade, para algo muito mais complexo.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

5 comentários:

iara-alencar disse...

oi, nao tem nada haver com o tema, mas eu queria que meu blogblogs ficasse como o teu.
so que eu quero aqueles baloezinhos do blogblogs original;

Marcelo R. Souza disse...

@Iara...
Não entendi que balãozinhos, e aonde?

Iara disse...

oi desculpe pela demora, se eu te disser que eu sumi o endereço voce me perdoa??
Eu estava falando do formato original do blogblogs.

-----
Eu queria aqueles menus bonitos com fundo.

Luis disse...

perfeito cara, deu certinho, salvou minha vida!!! um abraço e continue o belo trabalho!

Gustavo Marttos disse...

Marcelo, nem funcionou no meu. Fiz no meu blog de testes, claro. Mas deu errado. Fiz o seguinte. Hospedei a imagem no Imageshack.us e tal e colei la no lugar da div. Depois copiei o primeiro CSS e o resto, no HTML colei o que era pra colar e colei os HTML EMBAIXO do cabeçalho. E não apareceu. Por que?

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa