Como definir regiões sensíveis em figuras

 Um imagemap anteriormente so podia ser usado da seguinte maneira, quando o usuário clicava uma região, o browser (Netscape, por exemplo) enviava para o servidor as coordenadas e a informação de que era um imagemap. O servidor processava (executando um programa em PERL ou C) e enviava a página correspondente à região selecionada na imagem..

 Com a versão 3.0 do HTML, imagemaps podem ser executados na máquina do usuário. As versões mais recentes do Netscape e do Internet Explorer aceitam esta opção. Neste caso cada página traz além do mapa as informações necessárias para sua execução, ou seja, desencadear a chamada de um página correspondente à região clicada. 

 Mais adiante encontra-se uma explicação sobre como produzir imagens mapa. Um tutorial completo sobre como produzir mapas selecionáveis pode ser encontrado em: Mapas em HTML . Para demarcar as regiões que serbvirão como links usa-se alguns softwares de apoio como MapEdit ou MapThis.

 Um tutorial sobre a ferramenta Mapedit pode ser encontrada em: Tutorial do Mapedit

 Eis as etapas para criar essas regiões:

1. Antes de mais nada é preciso criar uma imagem e usando um programa de edição de mapas pode-se demarcar as regiões. Mapedit é um  exemplo deste tipo de programa mas existem outros. Usando as ferramentas existentes em cada um pode-se marcar as áreas que poderão ser clicadas pelos usuários. Mo site acima encontra-se a versão mais atual que pode ser usada em caracter de demonstração por 30 dias. Há uma versão antiga. O registro é requerido para usar mais de 30 dias e é grátis para instituições educacionais.

2. Criar um conjunto de coordenadas a ser associado à figura, contendo as definicoes de regiões (retângulos, círculos ou polígonos). Digamos que o arquivo com a imagem seja chamado meumap.gif

3. Definir as áreas usando as ferramentas do software que irá usar para isto. Para definir um circulo basta a coordenada do ponto central e o raio.
   Para definir um retângulo bastam as coordenadas dos pontos diametralmente opostos
   Para definir um polígono há que specificar as coordenadas de cada ponto que o forma.
   À cada área corresponderá um URL

4. Salvar esta definição no arquivo .htm onde a figura será incluída Um programa denominado imagemap deverá estar no diretório cgi-bin para interpretar estas definições

5. Na página onde o mapa sensitivo irá ser usado deverá ser colocado o seguinte:
   Como atributo da imagem deverá constar

   <img src="nomeimag.gif usemap="#meunome">
   
   O símbolo # indica que a especificação dos pontos que 
   definem as regiões sensíveis estará dentro da 
   própria página
   
   Exemplo:

   <IMG SRC="liane.gif" usemap="#liane">

6. Mais adiante (ao final) você colocará nesta página uma série de tags
• para indicar o início da definição das regiões sensitivas use o tag map name=
• para definir cada região use o tag area shape="xxxx" alt="texto alternativo" coords="sequencia de coordenadas dos pontos que delimitam a região"
  xxxx pode ser circle rect ou polygnon
• ao final coloque uma definição de shape="default" nohref para indicar que se for clicado algum ponto fora das áreas delimitadas nenhuma ação será desencadeada
• encerre com a tag   </map>
  

  
  Exemplo

  <map name="liane">
  <area shape="rect" alt="Pescoço" coords="28,151,111,184" href="pescoco.htm">
  <area shape="circle" alt="Rosto" coords="69,101,47" href="rosto.htm">
  <area shape="polygon" alt="cabelo" coords="15,93,13,63,28,37,59,18,82,14,98,24,114,38,123,54,125,75,126,92,116,91,111,73,101,60,85,52,85,52,60,46,60,46,41,56,41,56,26,68,21,85,15,93" href="cabelo.htm">
  <area shape="default" nohref>
  </map>
  
  

• Uma imagem de um grupo com três pessoas
• Minha foto , criado com o Mapedit usando uma imagem capturada com camara acoplada ao computador.

Referências