Mapa Político Brasileiro DHTML

Este mapa abaixo foi resultado de meus estudos acerca de mapeamento de imagens usando tags específicas do HTML, a saber <MAP> e <AREA>. Ao passar o mouse sobre os estados brasileiros alguns dados básicos são exibidas em um quadro cinza ao lado. Quando algum estado é clicado abre-se uma página do Wikipedia com informaçoes sobre esse estado.

Passe o mouse sobre o mapa para ver a descricao dos estados.

Barra de Navegação em CSS

Inicio

Item 01

Item 02

Item 03

Item 04

Servicos

Item 01

Item 02

Item 03

Item 04

Produtos

Item 01

Item 02

Item 03

Item 04

Contato

Item 01

Item 02

Item 03

Item 04

Hoje, publico um outro trabalho fruto de meus estudos sobre CSS e XHTLM. O objeto que estou lançando no blog, agora, é uma barra de navegação horizontal com menu "dropdown".

Deu um certo trabalho fazê-la. Ainda bem que existem verdadeiros gurus sobre o assunto na Internet, como o Maujor. Seu sítio é o mais rico em CSS aqui no Brasil. Utilizei as idéias expostas nesse site sobre criação de menus "popup" e as adaptei para este pequeno trabalho.

O menu foi testado no Firefox, Iceweasel, Epiphany e IE7. Está funcionando para os quatro navegadores testados. Para experimentar o menu em ação basta passar o mouse sobre a barra no início desta postagem.

Definição Popup em CSS

Nesta postagem eu incluo um pequeno código que fiz em CSS. Esta fonte consiste em fazer aparecer um pequeno quadro que contém a definição de um termo. Ela tenta imitar alguns sites movidos a Web2, no entanto é bem mais simples, pois comporta apenas uma definição para um dado termo ou verbete. Para testar basta passar o mouse sobre o termo abaixo.

Termo

Definicao do Termo: Esta eh a definicao do termo que estou usando. Esta eh a definicao do termo que estou usando. Esta eh a definicao do termo que estou usando. Esta eh a definicao do termo que estou usando. Esta eh a definicao do termo que estou usando. Esta eh a definicao do termo que estou usando.

A partir de agora utilizarei este pequeno recurso quando quiser mostrar a definição de algum termo técnico empregado neste blog.

Para obter a implementação, basta ver o código fonte dela a partir de seu navegador. Ficarei grato com dicas para o melhoramento do código.

Testei nos navegadores Firefox, Epiphany, Iceweasel e IE7. Fiquei satisfeito não ter precisado de Holly Hack Holly hack é um trecho de código que serve para consertar uma limitação específica do Internet Explorer. Ele toma proveito de um bug do IE para fazer funcionar alguns aspectos do CSS que esse não suporta. Por exemplo, alguns menus feitos em CSS não funcionam no IE. O Holly hack é aplicado ao código fonte para contornar esse problema. para o IE7.