Mapa de imagem com pop-up

Publicado em: 08/05/2006

Introdução

Mapas de imagem são sem dúvida um atrativo de forte apelo para construção de navegação em um web site. Contudo, na ordem direta do fascínio que exercem sobre o visitante carregam consigo sérios e às vezes intransponíveis problemas de acessibilidade chegando em certos casos a bloquear completamente a navegação para pessoas portadoras de necessidades especiais.

Vejamos o que dizem as Especificações do W3C sobre mapas de imagem e a acessibilidade:

Ponto de verificação 1.2 - Fornecer links de texto redundantes relativos a cada região ativa de um mapa de imagem armazenado no servidor. [Prioridade 1]

Ponto de verificação 1.5 Fornecer links textuais redundantes para cada região ativa dos mapas de imagem no cliente, até que os agentes de usuário proporcionem equivalentes textuais dos links a mapas de imagem armazenados no cliente. [Prioridade 3]

Neste tutorial mostro a construção de uma mapa de imagem com uma funcionalidade adicional constituida de pop-up de texto e de imagem totalmente construido com CSS, completamente acessíveis e que renderiza graciosamente quando acessada com folhas de estilo desabilitadas.

Vamos a uma visão antecipada do mapa de imagem que construiremos neste tutorial.

Os conteúdos no mapa de imagem

Conforme você pode observar, nosso mapa de imagem funcionando para cada um dos estados é constituido por:

O mapa propriamente dito - estados da região sudeste do Brasil - para simplificar chamaremos simplesmente de 'mapa';

O mapa carregado na abertura da página, apresenta o contorno dos estados da região sudeste com suas respectivas capitais marcadas por uma bolinha e o nome da capital. O mapa e a bolinha são uma imagem (reg-sudeste.gif).

A capital do estado - para simplificar chamaremos de 'capital';

Texto de um link com o nome da capital do estado;

Uma imagem da bandeira e brazão abaixo do mapa - para simplificar chamaremos de 'bandeira'.

Uma imagem mostrando a bandeira e o brazão do estado.

Uma imagem do estado - para simplificar chamaremos de 'estado colorido';

Imagem colorida nas cores de cada um dos estados para fazer a mudança quando o mouse passa sobre o link;

Um texto sumário da história colocado à direita do mapa - para simplificar chamaremos de 'texto história';

Texto histórico do estado.

Um texto descritivo área/população etc. colocado sobre o mapa - para simplificar chamaremos de 'texto características ';

Texto informativo das características geográficas do estado. Sua área, população, densidade habitacional e clima.

A marcação XHTML

A estrutura geral

Iniciaremos com uma grande DIV à qual atribuimos uma ID (#mapa) e que será o container para todo o nosso mapa.
Assim, posicionando esta DIV poderemos colocar o mapa em qualquer lugar na página.

A seguir colocaremos dentro desta grande DIV, 4 (quatro) outras DIVs sendo uma para cada estado da região sudeste.
Atribuiremos uma ID para estas DIVs : #rio para o estado do Rio de Janeiro, #sp para o estado de São paulo, #es para o estado do Espírito Santo e #mg para o estado de Minas Gerais.

A marcação para a estrutura geral é conforme mostrado abaixo:

<div id="mapa">
  
  <div id="rio">
  ...
  </div>

  <div id="sp">
  ...
  </div>

  <div id="es">
  ...
  </div>

  <div id="mg">
  ...
  </div>

</div>

A estrutura para cada estado

A estrutura de marcação é a mesma para cada um dos estados da região. Vamos tomar como exemplo o estado do Rio de Janeiro e para os demais é só repetir a estrutura no código.

Os elementos para cada estado são:

• Texto com o nome da capital do estado e ao qual atribuiremos a classe .rio-capital; (.sp-capital, .es-capital, .mg-capital)
• Imagem com a bandeira e o brazão e à qual atribuiremos a classe .estado-over;
• Imagem colorida nas cores do estado e à qual atribuiremos a classe .estadoriomini-over; (.estadospmini-over, .estadoesmini-over, .estadomgmini-over
• Texto com uma breve história do estado e ao qual atribuiremos a classe .estado-texto;
• Texto com as características geográficas do estado e ao qual atribuiremos a classe .estado-texto1;

A marcação para a estrutura de cada estado é conforme mostrado abaixo:

<div id="rio">
  
 <a href="endereço do link ou link morto">   
  
  <span class="rio-capital">Rio de Janeiro</span>   
  
  <span class="estado-over">
  <img src="rio.gif" alt="Bandeira..." width="315" height="255" />
  </span>
  
  <span class="estadoriomini-over">
  <img src="rio-mini.gif" alt="Est..." width="85" height="53" />
  </span>
  
  <span class="estado-texto">
  O Rio de Janeiro originou-se de partes da capitania...
  </span> 
  
  <span class="estado-texto1">  
  Área:43.696,054 km ...  
  </span> 
 
 </a> 

</div>

A estilização geral

Notar que colocamos todos os elementos do estado dentro de um elemento link <a> </a>.
Isto faz-se necessário porque o Internet Explorer só reconhece a pseudo classe :hover para este elemento, ao contrário dos demais navegadores standards para o quel podemos declarar a pseudo classe para qualquer elemento.

Como o elemento A é inline estaremos impedidos de colocar dentro dele elementos nível de bloco e assim usamos o elemento SPAN para container de cada texto ou figura. Podemos então 'esconder' e 'mostrar' cada um dos conteúdos de SPAN conforme o mouse esteja ou não sobre o link e de acordo com nossa conveniência.

No estado inicial é mostrado somente o mapa da região sudeste e o link com o texto contendo o nome da capital do estado.
Permanecem 'escondidos': a bandeira, o estado colorido, o texto história e o texto características.
As regra CSS para esconder são:

a .estado-over, a .estadoriomini-over,
a .estado-texto, a .estado-texto1 {
	display:none;
	}  /* esconde */

Quando o usuário passa o mouse sobre o link este é 'escondido' e são 'mostrados' os elementos citados acima.
As regras CSS para são:

a:hover .estado-over, a:hover .estadoriomini-over,
a:hover .estado-texto, a:hover .estado-texto1 {
	display:block;
	} /* mostra */

a:hover .rio-capital{display:none;} /* esconde */

Estes são os fundamentos da técnica para construção de mapas de imagem com pop-up. O colocação de cada texto ou imagem no seu devido lugar é uma questão de posicionamento CSS que fica facilitado pelo uso de uma DIV geral #mapa que não só permitira você locar o mapa, como também servirá de contexto de posicionamento para cada elemento SPAN.
Para detalhes de posicionamento e estilizações complementares, tais como tamanhos, tipos e cores de fontes, estilização de cabeçalho etc. veja o código fonte da página que contém as regras de estilo lá incorporadas.

Conclusão

As CSS nos permitem reproduzir muitos efeitos conseguidos tradicionalmente por scripts e códigos que na maioria das vezes são completamente inacessíveis exigindo assim codificação extra para contemplar a acessibilidade. Quase sempre tal codificação é negligenciada ou mesmo sequer é conhecida pela esmagadora maioria dos desenvolvedores. A técnica aqui ensinada tem por objetivo não só explicar o como fazer mas também despertar e chamar à reflexão aqueles que envolvidos com o desenvolvimento Web atentem para as questões de acessibilidade. E, acessibilidade vai muito além de sites acessíveis a deficientes visuais.

Bônus:
1-) Visite uma página contendo o mapa de imagem sem estilizações simulando acessibilidade a um usuário com navegador desabilitado para folhas de estilos.
2-) E outro usuário nas condições acima e mais ainda, com o navegador desabilitado também para imagens.