Menu - mapa de imagem

Publicado em: 31/03/2005

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.

As regras CSS para o menu - Folha de estilos

Consulte o código fonte da página

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.

1. 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;
2. Se o site já usou uma classe chamada menu no seu layout, surgirá outro ponto de conflito;
3. 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:

Caso 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ção, 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 o ID #ana-geral a para o elemento ul que marca o menu e também renomeei .menu para .anamenu.