:: Menu - mapa de imagem ::

O menu funcionando

Passe o mouse nos pontos sobre a imagem [D]

Ossos do crânio e da face
Temporal - Osso das têmporas e que contém os órgãos da audição, abaixo do osso parietal, acima e atrás da orelha.
Frontal - Osso da testa, sua função principal é a de proteção do cérebro.
Esfenóide - Osso ímpar, forma a base do crânio à frente do osso temporal e atrás dos orbitais.
Nasal - Par de pequenos ossos oblongos que formam a ponte do nariz.
Maxilar - Osso no qual se implantam os dentes superiores e forma também a parte inferior dos orbitais.
Mandíbula - Osso único, em forma de ferradura, que constitui a queixada inferior do homem e onde se implantam os dentes inferiores. É o maior e mais forte osso da face.

Anatomia óssea.

Este menu foi testado em:
IE 5.0+, FireFox, Safari, Opera 7.54
Mozilla 0.9 (este browser não suportou a transparência para a imagem do crânio e renderizou o contorno retangular em volta da imagem em cor preta (imagem .png) e em cor branca (imagem .gif). Acredito que versões mais recentes do Mozilla suportem a transparência, tal como nos demais browsers testados)

As regras CSS para o menu - Folha de estilos

<style type="text/css">
ul { /*a área do menu*/
position:relative /*contexto de posicionamento*/
list-style:none; /*retira bullets da lista*/
padding:0; /*zerando paddings*/
margin:0;  /*zerando margins*/
  
/*dimensões da área do menu*/
width:360px; 
height:253px;
  
/*Posicionando o crânio*/
background:#fff1f1 url(cranium.png) 
20px 10px no-repeat;
border:1px solid #e4ddd7; /*borda na área do menu*/
}
/*As regras para a (âncora) criam o efeito visual
para os bullets sobre o crânio, 
são os pontos clicáveis*/
a {
position:absolute;
display:block;
text-decoration:none;
text-align:center;
color:#f00;
border:3px solid #f00;/*simula o 
quadradinho vermelho*/
}
/*As regras a seguir posicionam os 
bullets sobre o crânio*/
a.menu1{
top:115px;
left:25px;
}
a.menu2{
top:60px;
left:70px;
}
a.menu3{
top:110px;
left:150px;
}
a.menu4{
top:120px;
left:90px;
}
a.menu5{
top:155px;
left:120px;
}
a.menu6{
top:220px;
left:80px;
}
a span {display:none} /*esconde caixa tooltip*/

/*mostra e estiliza a caixa tooltip*/
a.menu1:hover span, a.menu2:hover span,  
a.menu3:hover span, a.menu4:hover span,  
a.menu5:hover span,  a.menu6:hover span { 
width:160px; 
display:block;
position:absolute;
font:11px arial, verdana, helvetica, sans-serif; 
text-align:center;
padding:5px; 
border:1px solid #f00;
background:#fff; 
color:#000;
text-decoration:none;
}
/*box model para browsers conformes*/
li>a.menu1:hover span, li>a.menu2:hover span,  
li>a.menu3:hover span, li>a.menu4:hover span,  
li>a.menu5:hover span,  li>a.menu6:hover span { 
width:148px;
}
/*posiciona as caixas tooltip*/
a.menu1:hover  { 
border:none;
top:70px;
left:185px;
}
a.menu2:hover { 
border:none;
top:70px; 
left:185px;
}
a.menu3:hover {
border:none;
top:70px;
left:185px;
}
a.menu4:hover { 
border:none;
top:70px;
left:185px;
}
a.menu5:hover { 
border:none;
top:70px;
left:185px;
}
a.menu6:hover  { 
border:none;
top:70px;
left:187px;
}
/*estiliza o título do menu*/
.title h1 {
position:absolute;
right:8px;
top:-10px;
font:bold 14px  verdana, arial,helvetica, sans-serif; 
color:#9c816b;
background:none;
border:none;
}
</style>

Observações adicionais - especificidade e efeito cascata

Convém ressaltar alguns detalhes básicos de construção, mas que se forem esquecidos arruinarão o funcionamento correto do menu e conflitarão com as estilizações adotadas no site.

As regras de estilo estabelecidas para o elemento <a>
do menu provavelmente conflitarão com as regras de estilo para estes elementos e estabelecidas no layout do próprio site;
Se o site já usou uma classe chamada menu no seu layout, surgirá outro ponto de conflito;
Caso o site tenha estilizado o elemento <ul> para seu layout próprio, outro ponto de conflito.

Solução:

Regras CSS conflitantes são resolvidas levando-se em conta a especificidade e o efeito cascata

Se ao projetar o menu você notar que 'coisas estranhas' estão acontecendo com seus links, ou na sua página ou mesmo no menu, com respeito às estilizações, faça uma checagem levando em conta a resolução de conflitos de regras de estilos.

Contudo de maneira genérica você poderá tentar o seguinte:

C aso já exista uma classe .menu no seu site, renomeie a atual para, por exemplo: .mapa-menu

Crie uma div para englobar todo o menu (p.ex: #todo-menu) e use o seletor #todo-menu a no lugar do seletor a simplesmente. Isto aumenta a especificidade da regra bem como evita interferência na estilização própria do site.

Mas, atençao, estas indicações são gerais, não significando que resolva todos os casos de conflito. Veja no código fonte desta página que eu usei duas div's para resolver conflitos (#content #ana-geral a) e também renomeei .menu para .anamenu