Tutorial Mapas de imagens baseado em CSS

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